响应式表单中的 Angular 表单组与表单控件和表单构建器

Question

我是 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: ['']
    }),
  });
}

Answer 1

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

官方文档将其描述为：

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

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

选择哪种方法取决于您。

Answer 2

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

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

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

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

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

希望你能与这些用例相关