2017-01-23 16 views
1

である場合、私は特定のフィールドのための非同期バリデータフォームの2つのフィールドのための別のものを書いてきました:FormGroup非同期バリFormControlがエラー

this.aliasCtrl = formBuilder.control('', [], [ 
    (control: AbstractControl) => { 
    return new Promise(resolve => { 
     if(control.value === 'aaa') { 
     resolve({error: true}); 
     } else { 
     resolve(null); 
     } 
    }); 
    } 
]); 

this.formGroup = formBuilder.group({ 
    firstName: formBuilder.control('', []), 
    lastName: formBuilder.control('', []), 
    alias: this.aliasCtrl 
}, { 
    asyncValidator: (group: FormGroup) => { 
    return new Promise(resolve => { 
     if(group.value.firstName === 'aaa' && group.value.lastName === 'aaa') { 
     resolve({error2: true}); 
     } else { 
     resolve(null); 
     } 
    }); 
    } 
}); 

それらの両方が正しく機能しています。ポイントは、エイリアスコントロールバリデータがエラーをスローするとき(フィールドにaaaが含まれているとき)、「グローバル」は決してしません。

私の問題のplunker:

http://plnkr.co/edit/vyr48ke7fWEUwrXy43tn?p=previewは再現方法:

  1. が最初の1で始まるすべてのフィールドでaaaを置きます。良い、すべてが動作します。
  2. プランナーをリロードします。
  3. 最後のフィールドからすべてのフィールドにaaaを入力します。 firstNamelastNameフィールドを編集するときには、「グローバル」バリデータは呼び出されません(バリデータが呼び出されたときに見るために、私はplunkerにconsole.logを追加しました)。

この動作は意図的ですか?どうして?エラーが既に存在する場合、「グローバル」バリデータイベントを呼び出す方法は?

+1

エラーはすでに、あなたはおそらく検証を行って存在している場合。 –

+0

それでは、 'alias'フィールドのバリデーターが私が既にエラーを起こしたときにトリガーされるのはなぜですか?(' firstName'と 'lastName'は' alias'フィールドの前に 'aaa'を書き込むと同じです)?私は一貫性が必要だと思う。 – Happy

答えて

1

私の質問に答える1つの方法は、フィールドfirstNamelastNameを含むformGroupを定義することです。ここでは溶液でplunkerです:参考http://plnkr.co/edit/HAmaYySbxVE15VOl9uJ4?p=preview

が、私はここに私のformGroupてみましょう:

this.aliasCtrl = formBuilder.control('', [], [(control: AbstractControl) => { 
    return new Promise(resolve => { 
     if(control.value === 'aaa') { 
     resolve({error: true}); 
     } else { 
     resolve(null); 
     } 
    }); 
    } 
]); 

this.nameGroup = formBuilder.group({ 
    firstName: formBuilder.control('', []), 
    lastName: formBuilder.control('', []) 
}, { 
    asyncValidator: (group: FormGroup) => { 
    return new Promise(resolve => { 
     if(group.value.firstName === 'aaa' && group.value.lastName === 'aaa') { 
     resolve({error2: true}); 
     } else { 
     resolve(null); 
     } 
    }); 
    } 
}); 

this.formGroup = formBuilder.group({ 
    name: this.nameGroup, 
    alias: this.aliasCtrl 
}); 
関連する問題