Question

以下方法之间有什么区别：

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

input: [{}, inputValidatorFn()]

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

接缝的行为相同。

还是没有区别？

Example

Answer 1

没有任何区别。

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

angular site解释

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

Answer 2

完全没有区别。当您必须创建多个控件时，它可以减少冗余代码

Answer 3

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

因此，您的代码即可构建表单，

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。这样就行了。

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

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

它们都返回我们需要的FormControl，所以这里没有区别。

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

在以下情况下，手动创建表单控件实例可能会重复处理多种形式。 FormBuilder服务提供生成控件的便捷方法。

因此，对于较大的形式，我们使用数组初始化形式，例如[{}, inputValidatorFn()]服务的FormBuilder。

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

3 个答案: