formControlName和FormControl有什麼區別？

我正在使用Angular2的ReactiveFormsModule創建一個包含表單的組件。這裏是我的代碼：formControlName和FormControl有什麼區別？

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之間有什麼區別。

來源

2016-10-21 smartmouse

我想說，使用formControlName over formControl的主要原因是當你不想在組件中維護單獨的FormControl實例時。 –

我相信你錯過了第二個例子中的一個重要觀點：[formGroup]指令。 formControlName與[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 :)

來源

2016-10-21 08:38:22

如何處理嵌套'FormGroups'？ – smartmouse

你能回覆我最後的評論嗎？ :) – smartmouse

嗨@smartmouse，別人有他的問題在這裏回答https://stackoverflow.com/questions/43203005/angular2-nested-form-group –

[formControl]分配給您創建的FormControlDirective的FormControl實例的引用。

formControlName爲表單模塊指定一個字符串，以按名稱查找控件。

如果您爲控件創建變量，您也不需要Harry提到的.，但我也建議使用[formGroup]，因爲如果使用更復雜的表單，這可能會變得混亂。

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

來源

2016-10-21 08:42:27

當我添加this.fullName = new FormControl（''，Validators.required ）;我得到了一個錯誤，就像你不能分配，因爲它是隻讀屬性或常量，但在這裏我被視爲一個變量。所以請幫助 – Kansara

請發佈**確切**錯誤消息。創建一個包含允許重現的代碼的新問題可能會更好 –

與[formControl]可以用反應式編程的優勢，因爲FormControl有一個名爲valueChanges屬性（我知道這一個，現在，也許有比這更）返回一個Observable，您可以訂閱和使用它。（例如，在註冊情況下，您希望檢查輸入電子郵件在用戶更改該值時不會重複）

來源

2018-02-13 20:59:21

在接受的答案中提供了兩個等同的第三個這個（不推薦）：

<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]指令。

然而，對於這個模板沒有錯誤編譯，那麼你的組件需要聲明控件AbstractControls而不是FormControls：

myComponent的。TS

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

但是，請注意，聲明AbstractControls是not recommended，所以如果你的錯誤Cannot find control with unspecified name attribute那麼很可能你已經混合樣式或聲明瞭作爲AbstractControls控制。

來源

2018-02-27 14:05:09 rmcsharry

formControlName和FormControl有什麼區別？

回答

相關問題