Angular 表单生成器与表单控件和表单组

Question

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

我看到here：

The FormBuilder provides syntactic sugar that shortens creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex forms.

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

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

Answer 1

差不多。我总是尝试使用表单生成器，因为它更灵活，特别是当我们谈论动态表单创建时。如果你有动态表单创建，你只需将它作为一个对象的路径，它就会 return 你 FormGroup.

Answer 2

我已经阅读了 Angular 官方文档并在 Reactive Forms Part 上看到了：

The FormBuilder service is an injectable provider that is provided with the reactive forms module.

如果您阅读更多内容，您会发现表单生成器是一项与 form-group、form-control 和 form-array 功能相同的服务。官方文档将其描述为：

Creating form control instances manually can become repetitive when dealing with multiple forms. The FormBuilder service provides convenient methods for generating controls.

所以基本上说 FormBuilder 是一种试图帮助我们减少 boiler-plate 代码的服务。可以看到有关如何使用 FormBuilder 减少样板代码的示例 here。回答问题：

So is there any advantage of one over the other way of doing it or is it just preference?

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

Answer 3

这个例子是here

注意：您可以将 FormControl 组合成任一格式。

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

Answer 4

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

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

 this.form1 = new FormGroup({})

FormBuilder(助手class)

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

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

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

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});

来自表单生成器的方法组将return 相同的 FormGroup。所以你的选择对性能没有任何影响。不是 @rohit.khurmi095 在他的回答中所说的

Angular 表单生成器与表单控件和表单组

Angular form builder vs form control and form group

angular

angular-reactive-forms

formgroups

angular-formbuilder