41

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

我在这里看到：

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

我想知道不使用表单生成器是否有任何优势。我问这个是因为我正在查看一些角度代码，我看到正在使用表单控件和表单组，我想知道如果有更短的方法来做同样的事情，为什么要这样做？

那么，与另一种方式相比，一种方式有什么优势，还是只是偏好？

4

5 回答 5

48

我浏览了 Angular Official Docs 和Reactive Forms 部分，我看到：

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

如果您阅读更多内容，您会发现表单构建器是一种服务，它与表单组、表单控制和表单数组执行相同的操作。官方文档将其描述为：

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

所以基本上说 FormBuilder 是一项试图帮助我们减少样板代码的服务。可以在此处查看如何使用 FormBuilder 来减少样板代码的示例。要回答这个问题：

那么，与另一种方式相比，一种方式有什么优势，还是只是偏好？

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

于 2019-05-08T09:22:35.157 回答
29

这个例子在这里

注意：您可以将 FormControl(s) 组合成任何一种格式。

  emailFormControl = new FormControl(undefined, [
    Validators.required,
    Validators.email,
  ]);

使用 FormGroup：

export class ProfileEditorComponent {
  profileForm = 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('')
    })
  });
}

使用 FormBuilder：

export class ProfileEditorComponent {
  constructor(private fb: FormBuilder) { }

  profileForm = this.fb.group({
    email: this.emailFormControl,
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });
}
于 2020-02-13T16:18:59.913 回答
7

它几乎一样。我总是尝试使用表单生成器，因为它更灵活，特别是在我们谈论动态表单创建时。如果您有动态表单创建，您只需将其路径为一个对象，它将返回您 FormGroup。

于 2019-05-07T04:53:42.477 回答
2

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

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

 this.form1 = new FormGroup({})

FormBuilder（帮助类）

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

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

 this.form1 = this._fb.group({})
于 2021-02-07T03:18:51.957 回答
1

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在他的回答中所说的

于 2021-07-15T07:26:42.200 回答