Expression has changed after it was checked in Angular using Reactive Forms

Question

I'm doing a web application in Angular 6 and I'm using Reactive Forms. I have a Form Group with an array and I am setting the values in ngOnInit. I have a custom validator to know if the field called id is unique.

officesFormGroup: FormGroup;

constructor(private fb: FormBuilder) {
    this.officesFormGroup = this.fb.group({
      offices: this.fb.array([], Validators.required)
    });
  }

ngOnInit() {
      this.setOffices();
  }

setOffices() {
    const control = this.officesForm;

    this.company.offices.forEach((office, index) => {
      control.push(this.fb.group({
        id: office.id,
        name: office.name,
        address: office.address,
        services: this.fb.array([], Validators.required)
      }, {validator: this.officeValidator.bind(this)}));
  }

officeValidator(control: AbstractControl) {
    const id = control.get('id').value;

    if (id !== null && id !== '') {
      const offices: Office[] = this.officesForm.value;

      const isIdUnique = offices.map(office => office.id)
        .some(value => value === id);

      if (isIdUnique) {
        control.get('id').setErrors({unavailable: true});
      } else {
        control.get('id').setErrors(null);
      }
    }
  }

get officesForm() {
    return this.officesFormGroup.get('offices') as FormArray;
  }

To add a new office to the array:

addOffice() {
    const office = this.fb.group({
      id: [null, Validators.required],
      name: [null, Validators.required],
      address: [null, Validators.required],
      services: this.fb.array([], Validators.required)
    }, {validator: this.officeValidator.bind(this)});

    this.officesForm.push(office);
  }

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.

When the page is loaded for the first time, the field called id appears red, like it has errors, which is wrong. It should check for unique if the user adds another office and writed something in the id field.

My goal is, if the user adds a new office or try to edit the id of an existing office, check if the id is unique, I mean, if no other office has the same id.

Ushmi Dave · Accepted Answer · 2019-03-14 12:54:50Z

1

I have used in my application unique validator of @rxweb/reactive-form-validators to check whether Id is unique by using RxwebValidators.unique() in my formControl instance, because at a certain level i was facing the same issue.

I have applied the unique validator on Id property. See the below code

Component.ts :

export class UniqueValidatorComponent implements OnInit {


officesFormGroup: FormGroup;

constructor(private fb: FormBuilder) {
    this.officesFormGroup = this.fb.group({
      offices: this.fb.array([])
    });
  }

ngOnInit() {

  this.addOffice();

  }
addOffice() {
    const office = this.fb.group({
      id: [null,[ Validators.required,RxwebValidators.unique()]],
      name: [null, Validators.required],
      address: [null, Validators.required],
      services: this.fb.array([], Validators.required,)
    });
     this.officesForm.push(office);
  }
get officesForm() {
    return this.officesFormGroup.get('offices') as FormArray;
  }


}

Please refer this example : Stackblitz

Refer this Question related to unique validation

edited Mar 14, 2019 at 12:54

answered Mar 14, 2019 at 12:48

Ushmi Dave

2861 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RRGT19 Over a year ago

RxwebValidators will check if the id you added already exist on another office int he array, right? How? I don't understand where or how RxwebValidators is comparing all the id's.

Ushmi Dave Over a year ago

@RRGT19 Once you put on unique validator on respective column, the unique validator will validate value with other rows of the column. you can refer this article : medium.com/@oojhaajay/…

Collectives™ on Stack Overflow

Expression has changed after it was checked in Angular using Reactive Forms

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related