FormGroup 异步验证器无法正常工作答案

【问题标题】：FormGroup async validator not working properlyFormGroup 异步验证器无法正常工作
【发布时间】：2018-06-16 11:50:33
【问题描述】：

我不明白为什么我的异步验证器不能与 FormGroup 一起正常工作。我有：模型类

address.model.ts

export interface Address {
  city: string;
  street: string;
}

具有表单和预定义地址的组件

some.component.ts

addressForm: FormGroup;
addresses: Address[] = [
        {city: 'LA', street: 'Pushkina'},
        {city: 'NY', street: 'Shmidta'}
      ];

...

ngOnInit() {
this.addressForm = this.formBuilder.group({
      address: new FormGroup({
        city: new FormControl('', Validators.required),
        street: new FormControl('', Validators.required)
      }, null, this.availableDeliveryAddresses.bind(this))});
}

并且在这个组件中定义了异步验证器

availableDeliveryAddresses(formGroup: FormGroup): Promise<any> | Observable<any> {
    const promise = new Promise<any>((resolve) => {
      setTimeout(() => {
        if (this.addresses.indexOf({city: formGroup.controls['city'].value, street: formGroup.controls['street'].value}) === -1)  {
          resolve({'noAddress': true});
        } else {
          resolve(null);
        }
      }, 1500);
    });
    return promise;
  }

在模板中我有

some.component.html

    <div>
              <label for="city">City</label>
              <small *ngIf="!addressForm.get('address.city').valid && addressForm.get('address.city').touched">
                City is required
              </small>
              <small *ngIf="addressForm.get('address.city').touched &&
              addressForm.get('address.street').touched &&
   addressForm.hasError('noAddress', ['address'])">Given address is not our delivery scope</small>
              <input class="form-control" type="text" id="city" formControlName="city">
    </div>

在每种情况下，我都会收到“给定地址不是我们的交付范围”消息。

【问题讨论】：

indexOf() 测试数组是否包含参数。但事实并非如此：您的参数，即使它具有相同的属性，也是与存储在数组中的对象不同的对象。与===比较，{ foo: 'bar' } === { foo: 'bar' }为假。
与其使用indexOf，不如考虑使用findIndex。
@R.Richards some() （或相反，every()）实际上更合适，因为索引无关紧要。
@JBNizet 在我发表评论后我想了一秒钟。场景中的各种选项。
@JBNizet，我将代码更改为 if (this.addresses.some(el => el === { city: formGroup.controls['city'].value, street: formGroup.controls ['street'].value })) { resolve(null); } 其他 { 解决（{'noAddress': true});另外，我尝试使用 findIndex() 代替（使用 === -1）。但是行为仍然是一样的:(

标签： angular validation angular-reactive-forms

【解决方案1】：

谢谢，问题在于比较对象的方法。通过 === 比较对象，而不是比较每个属性。

【讨论】：