Reativeフォームで動的検証を追加する方法

Question

動的に生成されるフィールドに検証を追加したいと思います。これは私のコードです。一つの機能上の

projectForm: FormGroup; 

constructor(private sanitizer:DomSanitizer,private router: Router,private fb: FormBuilder,private projectService: ProjectService,private fnService:FunctionsService, private userService : UserService) {  

    this.projectForm = fb.group({ 
     'shirnkrap':[null, Validators.required], 
     'cd_text':[null, Validators.required], 
     'assignto':[null, Validators.required], 
     'projecttype':[null, Validators.required] 

    }); 
} 

私は<select>変更イベントにトリガする新しい検証を追加したいです。私はこれを試してみてください

、

this.projectForm.controls['project_name'].setValidators([Validators.required]); が、それは私にこのエラーを与える、

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setValidators' of undefined

だから、誰かが、私は検証を追加することができますどのように私を助けることができますか？

Answer 1

あなたの問題を正確にフォームにバリデータを追加することではないのに役立ちます願っています。フォームに動的にコントロールを追加しています。

残念ながら、それは方法addControlで実行可能なものではないようです。 documentationに従って、フォームをインスタンス化するときにはaddControl()のみ使用してください。

ダイナミックコントロールを処理するにはどうすればいいですか？ 2つのことは実行可能です：最初のものは、あまりにも複雑に見えるのは、FormArrayを使用することです。詳細については、この回答を見てください：How to dynamically add and remove form fields in Angular 2

秒1はあなたのダイナミックなフィールドで直接フォームを初期化するために、次のようになります。

this.projectForm = fb.group({ 
    'shirnkrap':[null, Validators.required], 
    'cd_text':[null, Validators.required], 
    'assignto':[null, Validators.required], 
    'projecttype':[null, Validators.required], 
    'project_name': '' 
}); 

テンプレートの中では、あなただけのベースとそのフィールドを非表示にする必要がありますその後ng-if="my-selected-value === 'someValue'"

を使用して、条件（上、ご<select>変化に、あなたはあなたのバリデータを追加する必要があります：

if(my-selected-value === 'someValue') { 
    this.myForm.controls["firstName"].setValidators([Validators.required]); 
    this.myForm.updateValueAndValidity(); 
} 

フォームの有効性を忘れずに更新してください。それ以外の場合は、フォームが有効でないことを確認する前に、ユーザーがフィールドを更新するまで待つ必要があります。

あなたがここに反応型のデボラ倉田のチュートリアルに例を見ることができる

：（別のフィールド上）

• Template with *ngIf
• Form is directly built with adresses
• The way she suggests to update validators

Answer 2

利用コードを動的検証を追加するには、以下：

this.myForm.controls["firstName"].setValidators([Validators.required]); 

あなたformGroupオブジェクトPROJECT_NAMEフィールドを持っていません。 formgroupオブジェクトにformcontrolを動的に追加することもできます。

this.projectForm.addControl("project_name", new FormControl(null)); 

は、それが