需要一些关于 [formGroup] formGroupName ,[formControl] formControlName 的建议

Posted 2023-03-13

【中文标题】需要一些关于 [formGroup] formGroupName ,[formControl] formControlName 的建议

【英文标题】：Need some advice on [formGroup] formGroupName ,[formControl] formControlName

【发布时间】：2019-04-20 01:10:12

【问题描述】：

我正在查看问题的现有答案 What is the difference between formControlName and FormControl?

仍然难以完全理解何时使用 [formControl] 而不是 formControlName。

我是否正确地得出结论 [基于@Paul Samsotha 评论]，当我使用类似于

的 FormBuilder 创建控件时

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

那么我应该使用类似的东西

<form [formGroup]="myForm">

  <label>
    First Name:
    <input type="text" formControlName="fullname">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="gender">
  </label>

</form>

如果我想像下面这样声明我的表格（基于@Günter Zöchbauer ansewer）：

constructor(fb: FormBuilder) 
    this.myForm = fb.group(
        'fullname': new FormControl('');
        'gender': new FormControl('')
    );

使用以下语法：

<form [formGroup]="myForm">

  <label>
    First Name:
    <input type="text" [formControl]="fullname">
  </label>

  <label>
    Last Name:
    <input type="text" [formControl]="gender">
  </label>

</form>

以上正确吗？ [formGroup] 和 formGroupName 也是一样的：你什么时候使用 formGroupName 而不是 [formGroup]？ 我想不出这个例子。你能解释一下为什么一个人可能会使用一个而不是另一个，或者推荐的做法是什么（如果有的话）？

【参考方案1】：

基本上，当您的表单是动态的时，您使用 [formControl] 或 [formControlName]，当您有固定的表单时，您只需使用 formControlName。

发生这种情况是因为 angular 中的 [] 结构是一种方式绑定，因此它会一直监视您在组件中拥有的任何属性的值。

[formControl]="propertyInComponent" [formControlName]="propertyInComponent" formControlName="nameGivenByYou"

【讨论】：

我们也可以将[formControlName]用于动态表单。 FormControl 用于独立控件