formControlNameとFormControlの違いは何ですか？

Question

私は、Angular2のReactiveFormsModuleを使用して、フォームを含むコンポーネントを作成しています。

foo.component.ts：

constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     'fullname': ['', Validators.required], 
     'gender': [] 
    }); 
} 

foo.component.html（[formControl]付き）：ここに私のコードです

<div class="fields"> 
    <div class="field"> 
     <label>Fullname*</label> 
     <input type="text" [formControl]="myForm.controls.fullname"/> 
    </div> 
</div> 

<div class="inline fields"> 
    <label for="gender">Gender</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> 
      <label>Male</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> 
      <label>Female</label> 
     </div> 
    </div> 
</div> 

foo.component.html （formControlName）：

<div class="fields"> 
    <div class="field"> 
     <label>Fullname*</label> 
     <input type="text" formControlName="fullname"/> 
    </div> 
</div> 

<div class="inline fields"> 
    <label for="gender">Gender</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender"> 
      <label>Male</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender"> 
      <label>Female</label> 
     </div> 
    </div> 
</div> 

両方の方法で動作します。しかし、私は[formControl]とformControlNameを使うことの違いは何か分かりません。

Answer 1

私はあなたが重要なポイントを逃したと信じています：[formGroup]ディレクティブは2番目の例です。 は[formGroup]と一緒に使用され、フォームの複数のドットのナビゲーションを保存します。たとえば：

<div> 
    <input type="text" [formControl]="myForm.controls.firstName"/> 
    <input type="text" [formControl]="myForm.controls.lastName"/> 
    <input type="text" [formControl]="myForm.controls.email"/> 
    <input type="text" [formControl]="myForm.controls.title"/> 
</div> 

は同等です：

<div [formGroup]="myForm"> 
    <input type="text" formControlName="firstName"/> 
    <input type="text" formControlName="lastName"/> 
    <input type="text" formControlName="email"/> 
    <input type="text" formControlName="title"/> 
</div> 

今、ネストされたFormGroupsを想像:)

Answer 2

[formControl]あなたはFormControlDirectiveに作成FormControlインスタンスへの参照を割り当てます。

formControlNameは、コントロールを名前で検索するためのフォームモジュールの文字列を割り当てます。

コントロールの変数を作成する場合、Harryが述べたように.も必要ありませんが、複雑なフォームの場合は乱雑になる可能性があるため、代わりに[formGroup]を使用することをお勧めします。 FormControlは、あなたが購読し、それを使用することができますObservable返しvalueChangesをという名前のプロパティが（私は多分それ以上あり、今これを知っている）があるため

constructor(fb: FormBuilder) { 
    this.fullName = new FormControl('', Validators.required); 
    this.gender = new FormControl(''); 
    this.myForm = fb.group({ 
     'fullname': this.fullName, 
     'gender': this.gender 
    }); 
} 

Answer 3

[formControl]であなたは、反応性のプログラミングの利点を使用することができます。 （たとえば、ユーザーが値を変更するとすぐに入力電子メールを確認するレジスタシナリオでは非常に便利です）

Answer 4

2つの回答は、これは（推奨しない）：

<div [formGroup]="myForm"> 
    <input type="text" [formControl]="firstName"/> 
    <input type="text" [formControl]="lastName"/> 
    <input type="text" [formControl]="email"/> 
    <input type="text" [formControl]="title"/> 
</div> 

[formGroup]ディレクティブを使用していることに注意してください。

myComponentという：

ただし、エラーなしでコンパイルするには、このテンプレートのために、そしてあなたのコンポーネントがAbstractControlsなくFormControlsなどのコントロールを宣言する必要があります。tsが

firstName: AbstractControl 
lastName: AbstractControl 
email: AbstractControl 
title: AbstractControl 

しかし、AbstractControlsを宣言するnot recommendedですので、あなたがエラーCannot find control with unspecified name attributeを得れば、あなたがスタイルを混在しているか、AbstractControlsとしてあなたのコントロールを宣言している可能性があることに注意してください。