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

Question

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

我看到here那个：

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

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

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

Answer 1

这个例子是here

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

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

使用表单组：

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 2

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

Answer 3

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

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

 this.form1 = new FormGroup({})

FormBuilder（辅助类）

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

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

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

Answer 4

我浏览了 Angular 官方文档和 Reactive Forms Part 我已经看到：

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

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

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

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

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

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

Answer 5

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