2

フォーム (リアクティブ/モデル ベースのアプローチ) の 2 つのフィールドに対してクロス フィールド検証を実装していますが、フォーム コントロールの既存のエラー リストにエラーを追加する方法がわかりません。

形：

this.myForm = new FormGroup({
  name: new FormControl('', Validators.minLength(3));
  city: new FormGroup({
    cityOne: new FormControl('', Validators.minLength(3)),
    cityTwo: new FormControl('', Validators.minLength(3))
  }, this.validateEqualCities)
});

バリデーター:

validateEqualCities(formGroup: FormGroup) {
    return (control: AbstractControl): { [key: string]: any } => {
    if (formGroup.controls['cityOne'].value &&  formGroup.controls['cityTwo'].value && formGroup.controls['cityOne'].value !== formGroup.controls['cityTwo'].value) {

     formGroup.controls['cityOne'].setErrors({ 'equalCities': true }, { emitEvent: true });
     formGroup.controls['cityTwo'].setErrors({ 'equalCities': true }, { emitEvent: true });

        return { 'equalCities': false };

    } else {
      formGroup.controls['cityOne'].updateValueAndValidity({ onlySelf: true, emitEvent: false });
      formGroup.controls['cityTwo'].updateValueAndValidity({ onlySelf: true, emitEvent: false });
    }

    return null;
    };
  }

私の問題：検証が失敗した場合、「setErrors（..）」はすでに存在するすべてのエラー（formControlsのバリデーター）を上書きするため、実際には2つのエラーがあるはずなので、正しい状態はありません。

エラーをフォーム コントロールに直接設定せず、フォームにエラーを返すだけの場合、フォームのみが無効になり、エラーが発生しますが、そのコントロールは取得されません。

フォームとコントロールの両方に検証の実際の状態があることをどのように達成できますか?

どうもありがとうございました！

4

1 に答える 1