反应式表单中的 Angular 表单组与表单控件和表单构建器答案

【问题标题】：Angular form group vs form control and form builder in Reactive Forms反应式表单中的 Angular 表单组与表单控件和表单构建器
【发布时间】：2021-12-04 20:29:45
【问题描述】：

我是 Angular 的新手。我遇到了具有三个变体的代码。我想知道这三个在响应式表单（表单组、表单构建器和表单控件）中的实现有何不同。

是否有任何优先级基于一种方法的应用程序性能而不是另一种方法，还是只是偏好？

addressFormControl = new FormControl(undefined, [
        Validators.required,
        Validators.address,
      ]);



   export class BusinessComponent {
      BusinessForm = new FormGroup({
        email: this.emailFormControl, 
        firstName: new FormControl(''),
        lastName: new FormControl(''),
        address: new FormGroup({
          street: new FormControl(''),
          city: new FormControl(''),
          state: new FormControl(''),
          zip: new FormControl('')
        })
      });
    }

export class BusinessComponent {
  constructor(private fb: FormBuilder) { }    
  businessForm = this.fb.group({
    business: this.businessFormControl,
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });
}

【问题讨论】：

标签： angular typescript angular-reactive-forms form-control formgroups

【解决方案1】：

让我们举个例子。当有以下用例时，您可以使用它

formControl： 当您的 UI 设计中的独立字段很少（可能是一两个）时，可能是输入。所以不需要表单标签。

formGroup： 当您的表单具有多个输入、下拉菜单和单选按钮时。所有这些你都想创建一个 JSON 对象来传递 API。

formBuilder：当你有一个动态表单时。例如，有地址栏输入。用户可以通过单击“添加新行”按钮添加尽可能多的输入栏。那个时候你可以利用创建动态表单控件。

所有这些都为您提供了在语义上一起创建组的选项，否则，所有这些都可以通过 formControl 来实现。

希望你能理解这些用例

【讨论】：

【解决方案2】：

好吧，没有技术优势，无论您使用哪种代码都归结为您的偏好。

官方文档是这样描述的：

手动创建表单控件实例可能会变得重复处理多种形式。 FormBuilder 服务提供生成控件的便捷方法。

所以基本上说 FormBuilder 是一项试图帮助我们减少样板代码的服务。

由您决定选择哪种方法。

【讨论】：