Angular2相互依存型フォームフィールドの有効性確認

Question

私は2つのフォームフィールドを持っています。最初のフィールドが入力されていれば、2番目のフィールドは必須です。カスタムバリデータを使用してAngular2でこれを実行しようとすると、バリデータは初期化時および特定のフィールドが変更されたときにのみ起動されます。

ケース： - ユーザーがフィールド1を入力します - フィールド2は必須になりますが、ユーザーがフィールド2を実際に変更するまで（カスタム検証を実行するまで）はありません。

private createForm():void { 
this.testForm = this._formBuilder.group({ 
    'field1': [], 
    'field2': ['', this.validateRequired()] 
}); 
} 

private validateRequired(){ 
console.log("something", this); 
let component = this; 

return (control: Control): { [s: string]: boolean } => { 
    return component.testModel.field1 && !control.value {"required":true} : null; 
} 
} 

このplunkrを参照してください：http://plnkr.co/edit/PEY2QIegkqo8BW1UkQS5?p=preview

編集：

this.testForm.controls['field1'].valueChanges.subscribe(
    value => { 
    component.testForm.controls['field2].updateValueAndValidity();   
    } 
) 

：今、私はフィールド1のとvalueChangeに観測可能な加入とするため

のように、フィールド2に手動でチェックを実行して変更したとき

しかし、私はこれを行うためのより良い方法が必要であるように感じる。

Answer 1

あなたはこのようなグループのグローバルバリデータを使用することができます。

private createForm():void { 
this.testForm = this._formBuilder.group({ 
    'field1': [], 
    'field2': ['', this.validateRequired()] 
}, { 
    validator: this.someGlobalValidator // <----- 
}); 
} 

someGlobalValidator(group: ControlGroup) { // <----- 
    var valid = false; 

    for (name in group.controls) { 
    var val = group.controls[name].value 

    (...) 
    } 

    if (valid) { 
    return null; 
    } 

    return { 
    someValidationError: true 
    }; 
} 

Answer 2

私はアルネさんのコメントに対処するために、ティエリの回答にビットを展開したいです。フォームグループレベルのバリデーターで複数のフィールドの検証と多分複数の検証を処理するには、バリデーターから関数を返し、エラータイプを示すオブジェクトを返します。ここでは、ポイントを説明するためにいくつかの余分なエラーを追加したバリデーターに一致するフィールドの例を示します。各オブジェクトプロパティが任意の文字列であり、値がブール値である可能性のあるいくつかのプロパティを持つオブジェクトを返します。

export function FieldMatchingValidator(field1: string, field2 :string) { 

    return (cg: FormGroup): { [s: string]: boolean } => { 
     let retVal = null; 
     let f1 = cg.controls[field1]; 
     let f2 = cg.controls[field2]; 
     retVal = f1.value === f2.value ? null : { fieldMismatch: true }; 
     if(somecondition){ 
      retVal['someerror'] = true; 
     } 
     if(someothercondition){ 
      retVal['someothererror'] = true; 
     } 
     return retVal; 
    } 
} 

このバリデータが実行されると、エラー状態が発生した場合、その後、フォームのエラーの性質が異なるエラーを示す1つまたは複数の特性を有する、返されたオブジェクトが移入されます。次に、検証エラーが発生したコントロールに適切な角度プロパティを設定します。

<div *ngIf="myForm.hasError('fieldMismatch')"> 
Field Mismatch 
</div> 

<div *ngIf="myForm.hasError('someerror')"> 
Some Error 
</div> 

<div [class.Errors]="myForm.hasError('someothererror')"> 
Some Other Error 
</div>