爲什麼我們將[formGroup]指令應用於方括號下的表單，而對於表單字段，我們應用formControlName指令而不使用方括號？

Question

我正在關注反應形式的Angular 4教程。雖然aplying FormGroup和FormControl指示我發現不一致 -

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

它在方括號應用[formGroup]指令而沒有方括號formControlName指令。

缺少什麼我在這裏？

Answer 1

如果你有一個指令mydir與輸入mydir：

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

它可以具有或不具有支架一起使用：

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

在第一種情況下，mydir的值綁定將是一個字符串exp：

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

在第二種情況下的表達式將被評估，以父組件上任何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來說很重要：指令（例如formGroup或formControlName）在正常寫入時可以設置爲等於字符串，或者在封裝在方括號中時設置爲等於來自組件TypeScript的值。

所以[formGroup]="formObj"被設置formGroup指令等於實際的，動態的對象，而formControlName="username"只是設置等於字符串「名」