反应式表单中的角度表单组与表单控件和表单生成器

Question

我是角度新手。我发现该代码具有三种变体。我想知道这三者在响应式表单（表单组、表单生成器和表单控件）中实现有什么区别。

是否存在基于一种方法的应用程序性能相对于另一种方法的优先级，或者这只是偏好？

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

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

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

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

formBuilder：当您有动态表单时。例如，有地址栏输入。用户可以通过单击“添加新行”按钮添加任意数量的输入栏。那时您可以利用创建动态表单控件。

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

希望您能理解这些用例