FormControl 初始化方法有什么区别？

Question

以下方法有什么区别：

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

input: [{}, inputValidatorFn()]

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

它的行为似乎是一样的。

还是完全没有区别？

Example

Answer 1

完全没有区别。

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

angular site说明，

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.

Answer 2

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

所以你的代码来构建表单，

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

      arrayNotation: [{}, inputValidatorFn()],

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

此处您正在使用 fb.group() 方法构建一组控件。如果您看到 FormBuilder class 声明，您会看到它有多个方法 group()、control() 和 array()

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

group()：它有两个参数（controlsConfig和options）和return一个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() function understands that [{}, inputValidatorFn()] is a FormControl. thus it works.

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

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

都是我们需要的return一个FormControl，所以，这里没有区别。

来自 Angular documentation 的一行可能会有帮助。

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

因此，对于更大的形式，我们使用像您 FormBuilder 服务的 [{}, inputValidatorFn()] 那样的数组初始化形式。

FormControl 初始化方法有什么区别？

What is the difference between FormControl init methods?

angular

angular-forms

angular-formbuilder