角2は、検証メッセージのコントロールを参照します

Question

私は角度2で動作するように検証メッセージを取得しようとしています。角膜2には非常に多くの変更があり、インターネット上で優雅な解決策はないようですこれを重複としてマークしないでください）。

現在、私はこれをやっている私のモデル駆動型フォームの検証メッセージを表示するには：

<div class="form-group"> 
    <label for="name">Name</label> 
    <input type="text" class="form-control" id="name" formControlName="name"> 
    <div class="text-warn" *ngIf="!addUserForm.controls.name.pristine && !addUserForm.controls.name.valid"> 
     Please enter a name 
    </div> 
</div> 

私のコンポーネントのformbuilderは、次のようになります。

ngOnInit() { 
    this.addUserForm = this.fb.group({ 
     name: ['', [Validators.required]], 
     email: ['', [Validators.compose([EmailValidators.normal(), Validators.required])]], 
     phone: ['', [Validators.compose([UniversalValidators.isNumber(), Validators.required])]], 
     address: this.fb.group({ 
      addr1: ['', [Validators.required]], 
      addr2: [''], 
      addr3: [''], 
      city: ['', [Validators.required]], 
      zip: ['', [Validators.required]], 
     }) 
    }); 
} 

私は私が使用したことを覚えておいてください*ngIf="!name.valid"を使用して表示する検証メッセージを得ることができるようになりましたが、現在、フォームグループ全体（*ngIf="!addUserForm.controls.name.valid"）を参照せずに動作するようには見えません。私がそれを短時間行うと、validに関するエラーメッセージが表示されます（何らかの理由でコントロールを直接参照できないため）。

これを実行する方法はあまり冗長でなければなりません。私はそれがReactive forms/Model driven formsとTemplate driven formsないで可能だと思う私は、単純な*ngIf="!name.valid"を使用して表示するように検証メッセージを取得することができるように使用されることを覚えておいてください

Answer 1

...

。

私はまた、フム