使用反应式表单在 Angular 中检查后，表达式发生了变化

Posted 2023-02-22

【中文标题】使用反应式表单在 Angular 中检查后，表达式发生了变化

【英文标题】：Expression has changed after it was checked in Angular using Reactive Forms

【发布时间】：2019-08-04 21:41:12

【问题描述】：

我正在使用 Angular 6 做一个 Web 应用程序，并且我正在使用 Reactive Forms。我有一个带有数组的表单组，我在ngOnInit 中设置值。我有一个自定义验证器来了解名为 id 的字段是否是唯一的。

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;
  

将新办公室添加到阵列中：

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：表达式已更改 检查后。以前的值：'ngIf: false'。当前值： 'ngIf: true'。

第一次加载页面时，id 字段显示为红色，好像有错误一样，这是错误的。如果用户添加另一个办公室并在id 字段中写入内容，它应该检查唯一性。

我的目标是，如果用户添加新办公室或尝试编辑现有办公室的id，请检查id 是否唯一，我的意思是，如果没有其他办公室具有相同的id。

【参考方案1】：

我在我的应用程序中使用了 @rxweb/reactive-form-validators 的唯一验证器，通过在我的 formControl 实例中使用 RxwebValidators.unique() 来检查 Id 是否唯一，因为在某个级别上我遇到了同样的问题。

我已在 Id 属性上应用了唯一验证器。请看下面的代码

组件.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;
  

请参考这个例子：Stackblitz

参考这个Question 与唯一验证相关

【讨论】：

RxwebValidators 将检查您添加的id 是否已存在于阵列中的另一个办公室，对吗？如何？我不明白RxwebValidators 在哪里或如何比较所有id。

@RRGT19 一旦你在相应的列上放置了唯一验证器，唯一验证器将验证该列的其他行的值。你可以参考这篇文章：medium.com/@oojhaajay/…