Question

与表单生成器相比，使用表单控件和表单组有什么优势吗？

我见过here：

FormBuilder提供了语法糖，可以缩短创建FormControl，FormGroup或FormArray的实例的时间。它减少了构建复杂表格所需的样板数量。

我想知道不使用form-builder是否有任何优势。我之所以这样问是因为我正在经历一些角度代码，并且看到使用了表单控件和表单组，并且我想知道如果有更短的方法可以做到这一点，为什么会这样做呢？

那么，做某事相对于另一种方式有什么优势吗？还是只是偏爱？

Answer 1

此示例为here

使用FormControl：

constructor(private fb: FormBuilder) { }
profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});

使用FormBuilder：

export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });

Answer 2

在 FormGroup 上使用 FormBuilder 有助于提高应用程序性能。

表单组 new = 创建的新对象 - 必须手动删除（不利于应用程序内存性能）

 this.form1 = new FormGroup({})

FormBuilder（辅助类）

创建 FormBuilder 对象（删除“new”关键字）
需要在构造函数中注入

构造函数（私有_fb：FormBuilder）{}

 this.form1 = this._fb.group({})

Answer 3

几乎相同。我一直尝试使用表单生成器，因为在谈论动态表单创建时，它特别灵活。因此，如果您具有动态表单创建功能，只需将其作为对象的路径，它将返回FormGroup。是的，如果您衡量代码表单生成器的大小将“更小”。

Answer 4

我查看了Angular官方文档，并在Reactive Forms Part上看到：

FormBuilder服务是随反应式模块一起提供的可注入提供程序。

如果您了解更多信息，则会看到表单生成器是一项与表单组，表单控件和表单数组功能相同的服务。官方文档将其描述为：

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

因此基本上可以说FormBuilder是一种旨在帮助我们减少样板代码的服务。有关如何使用FormBuilder减少样板代码的示例，可以参见here。要回答这个问题：

那么，做某事相对于另一种方式有什么优势吗？还是只是偏爱？

没有技术优势，无论使用哪种代码，都取决于您的偏好。

Answer 5

https://github.com/angular/angular/blob/master/packages/forms/src/form_builder.ts#L81

 group(
  controlsConfig: {[key: string]: any},
  options: AbstractControlOptions|{[key: string]: any}|null = null): FormGroup {
const controls = this._reduceControls(controlsConfig);

let validators: ValidatorFn|ValidatorFn[]|null = null;
let asyncValidators: AsyncValidatorFn|AsyncValidatorFn[]|null = null;
let updateOn: FormHooks|undefined = undefined;

if (options != null) {
  if (isAbstractControlOptions(options)) {
    // `options` are `AbstractControlOptions`
    validators = options.validators != null ? options.validators : null;
    asyncValidators = options.asyncValidators != null ? options.asyncValidators : null;
    updateOn = options.updateOn != null ? options.updateOn : undefined;
  } else {
    // `options` are legacy form group options
    validators = options['validator'] != null ? options['validator'] : null;
    asyncValidators = options['asyncValidator'] != null ? options['asyncValidator'] : null;
  }
}

return new FormGroup(controls, {asyncValidators, updateOn, validators});

来自表单构建器的方法组将返回相同的 FormGroup。因此，您的选择与性能无关。不是@rohit.khurmi095在他的回答中所说的

角表单生成器vs表单控件和表单组

5 个答案: