ローカル参照を使用してHTMLコードを簡略化します

Question

角度2のフォームを作成しています。次のコードは機能します。

<div class="form-group"> 
    <label for="firstName">First Name</label> 
    <input type="text" class="form-control" formControlName="firstName"> 
    <label 
     class="errorMessage" 
     *ngIf="!this.registrationForm.controls['firstName'].valid" 
     for="firstName"> 
     First name is required</label> 
    </div> 

私はいけないように、私はコードを減らすために、次のように入力フィールドへのローカル参照を割り当てることができると思った

!this.registrationForm.controls['firstName'] 

をしなければならないABIT、それを単純化したかったです。しかし、それは私のためには機能しません

<div class="form-group"> 
    <label for="firstName">First Name</label> 
    <input type="text" class="form-control" formControlName="firstName" #firstName> 
    <label 
     class="errorMessage" 
     *ngIf="!firstName.valid" 
     for="firstName"> 
     First name is required</label> 
    </div> 

これは正しい方法ですか？

Answer 1

落下this echonaxと記載されている。また、get()は、コントロールにアクセスするための好ましい方法です。

*ngIf="!registrationForm.get('firstName').valid" 

また、ゲッター

get firstName() : AbstractControl { 
    return this.registrationForm.get('firstName'); 
} 

を追加したり、目的を結合するためのFormBuilderに追加しても、前に変数にコントロールを割り当てることができます。