角度2のクロスフィールド検証（モデルベース）addErrors？

Question

私は、フォーム（反応性/モデルベースのアプローチ）に二つのフィールドのためのクロスフィールド検証を実施していると私はformcontrol

フォームの既存のエラー一覧にエラーを追加する必要がありますかわからない：

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; 
    }; 
    } 

私の問題： 検証は（formControlsのバリデータ）が既にあるすべてのエラーを優先しますので、全く正しい状態が存在しない、ので、「setErrors（..）」を失敗した場合実際には2つのエラーが発生するはずです。

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

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

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

Answer 1

エラーオブジェクトは、エラーを割り当て、変更してオブジェクト全体を書き戻す前にキャプチャできます。

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) { 
     let errors = formGroup.controls['cityOne'].errors ? formGroup.controls['cityOne'].errors : {}; 
     errors['equalCities'] = false; 
     formGroup.controls['cityOne'].setErrors(errors, { emitEvent: true }); 

     errors = formGroup.controls['cityTwo'].errors ? formGroup.controls['cityTwo'].errors : {}; 
     errors['equalCities'] = false; 

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

     return { 'equalCities': false }; 
    <...> 

はここで働いてデモをPlunkerです：http://plnkr.co/edit/XTeH1ifQTJSoMvBEvE0d?p=preview