angular - FormControl init 方法有什么区别？

Question

以下方法有什么区别：

input: new FormControl({}, inputValidatorFn())

input: [{}, inputValidatorFn()]

input: formBuilder.control({}, inputValidatorFn())

它的行为似乎相同。

还是根本没有区别？

例子

Answer 1

完全没有区别。

使用FormBuilder初始化表单控件使用工厂设计模式，这是一种更好的编码方式。

角度网站解释说，

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

Answer 2

我将简短地回答这个问题。

所以你构建表单的代码，

fb.group({
      newFormControl: new FormControl({}, inputValidatorFn()),

      arrayNotation: [{}, inputValidatorFn()],

      input: fb.control({}, inputValidatorFn()),
    })

在这里，您正在使用fb.group()方法来构建一组控件。如果您看到FormBuilder类声明，您会看到它有多个方法group()，control()并且array()

让我们看看组方法的定义，

group()：它需要两个参数 (controlsConfig和options) 并返回一个FormGroup。

/**
 * Construct a new `FormGroup` instance.

 * @param controlsConfig : A collection of child controls. 
The key for each child is the name, under which it is registered.

 * @param options : Configuration options object for the `FormGroup`. 
With the help of this we can set validators, asyncValidators for that `FormGroup`.
*/


group(controlsConfig: {
    [key: string]: any;
}, options?: AbstractControlOptions | {
    [key: string]: any;
} | null): FormGroup;

您可以通过两种方式构建控件。

controlsConfig是一个any类型的对象，我们传递一个子控件的集合。

fb.group()函数理解[{}, inputValidatorFn()]为FormControl. 因此它有效。

我们总是可以创建一个控件，

1. 使用FormControl -new FormControl({}, inputValidatorFn())
2. 使用FormBuilder服务 -fb.control({}, inputValidatorFn())

它们都返回FormControl我们需要的 a，因此，这里没有区别。

Angular 文档中的一行可能会有所帮助。

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

所以，对于更大的形式，我们使用像你[{}, inputValidatorFn()]的FormBuilder服务一样的数组初始化形式。