[formGroup]ディレクティブを角括弧で囲んだフォームに適用する理由フォームフィールドで角括弧なしのformControlNameディレクティブを適用するのはなぜですか？

Question

私は反応型に関するAngular 4チュートリアルに従っています。 FormGroupとFormControlディレクティブをaplyingながら、私は矛盾を発見しています -

<form [formGroup]="formObj"> 
<div class="form-group"> 
<input formControlName="username"> 

それは角括弧なしでformControlName指示しながら、角括弧の下に[formGroup]ディレクティブを適用しています。

私はここで何が欠けていますか？

Answer 1

に等しく設定されている間そう[formGroup]="formObj"は、実際、動的オブジェクトに等しいformGroupディレクティブを設定している：

@Directive(...) 
export class MyDir { 
    @Input() mydir; 

それは括弧の有無にかかわらず使用することができる。

<span mydir="exp">...</span> 
<span [mydir]="exp">...</span> 

最初のケースでは、結合mydirの値は、文字列expなり：式は、親コンポーネントにどのexpに評価される第2のケースで

export class MyDir { 
    @Input() mydir; 
    ngOnInit() { 
     console.log(this.mydir); // "exp" 

含ま：今

@Component(template: `<span mydir="exp"`) 
class Parent { 
    exp = 'hello'; 

export class MyDir { 
    @Input() mydir; 
    ngOnInit() { 
     console.log(this.mydir); // "hello" 

フォームディレクティブを使用してケースに追加します。

formGroupは、FormGroupクラスのインスタンスが必要です。 []を使用しない場合、ディレクティブはオブジェクトではなく文字列formObjを取得します。

formControlNameには、親フォームグループで検索するコントロールの名前である文字列が必要です。それが括弧のなかで使われる理由です。

Answer 2

Angular：directives（formGroupやformControlNameなど）は、通常の場合は文字列と等しく、角括弧で囲んだ場合はTypeScriptの値と等しくなるように設定することをお勧めします。

あなたが入力mydirとディレクティブmydirを持っている場合はformControlName="username"は単なる文字列「名前」