填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/forms

FormBuilder

使用用户指定的配置创建 AbstractControl。

Creates an AbstractControl from a user-specified configuration.

查看"说明"...

      
      class FormBuilder {
  group(controlsConfig: { [key: string]: any; }, options: AbstractControlOptions | { [key: string]: any; } = null): FormGroup
  control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl
  array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormArray
}

参见

Provided in

说明

FormBuilder 提供了一个语法糖，以简化 FormControl、FormGroup 或 FormArray 实例的创建过程。 它会减少构建复杂表单时所需的样板代码的数量。

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.

方法

group()

构建一个新的 FormGroup 实例。

Construct a new FormGroup instance.

      
      group(controlsConfig: { [key: string]: any; }, options?: AbstractControlOptions): FormGroup
参数
controlsConfig object

一组子控件。每个 key 就是注册进来的控件的名字。

A collection of child controls. The key for each child is the name under which it is registered.

options AbstractControlOptions

FormGroup 的配置项对象。该对象为 AbstractControlOptions 类型，并可能包含下列字段：

Configuration options object for the FormGroup. The object should have the the AbstractControlOptions type and might contain the following fields:

  • validators：一个同步验证器函数或其数组

    validators: A synchronous validator function, or an array of validator functions

  • asyncValidators：一个异步验证器函数或其数组

    asyncValidators: A single async validator or array of async validator functions

  • updateOn ：控件应更新的事件（选项： 'change' | 'blur' | submit'）

    updateOn: The event upon which the control should be updated (options: 'change' | 'blur' | submit')

可选. 默认值是 `undefined`.
返回值

FormGroup

构造一个新的 FormGroup 实例。

Construct a new FormGroup instance.

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

此 api 不是类型安全的，可能会导致 Closure Compiler 重命名时出现问题。应该改用 FormBuilder#group 的接受 AbstractControlOptions 的重载形式。

Deprecated This API is not typesafe and can result in issues with Closure Compiler renaming. Use the FormBuilder#group overload with AbstractControlOptions instead. Note that AbstractControlOptions expects validators and asyncValidators to be valid validators. If you have custom validators, make sure their validation function parameter is AbstractControl and not a sub-class, such as FormGroup. These functions will be called with an object of type AbstractControl and that cannot be automatically downcast to a subclass, so TypeScript sees this as an error. For example, change the (group: FormGroup) => ValidationErrors|null signature to be (group: AbstractControl) => ValidationErrors|null.

参数
controlsConfig object

子控件的集合。每个子控件的键就是其注册名称。

A collection of child controls. The key for each child is the name under which it is registered.

options object

FormGroup 配置选项对象。旧的配置对象包括：

Configuration options object for the FormGroup. The legacy configuration object consists of:

  • validator：一个同步验证器函数或其数组

    validator: A synchronous validator function, or an array of validator functions

  • asyncValidator ：单个异步验证器或异步验证器函数数组。注意：不推荐使用旧格式，并且会在 Angular 的后面的某个主要版本中将其删除。

    asyncValidator: A single async validator or array of async validator functions Note: the legacy format is deprecated and might be removed in one of the next major versions of Angular.

返回值

FormGroup

control()

构建一个新的 FormControl 实例。

Construct a new FormControl with the given state, validators and options.

      
      control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl
参数
formState any

使用一个初始值或一个定义了初始值和禁用状态的对象初始化该控件。

Initializes the control with an initial state value, or with an object that contains both a value and a disabled status.

validatorOrOpts ValidatorFn | AbstractControlOptions | ValidatorFn[]

一个同步验证器函数或其数组，或者一个包含验证器函数和验证触发器的 AbstractControlOptions 对象。

A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.

可选. 默认值是 `undefined`.
asyncValidator AsyncValidatorFn | AsyncValidatorFn[]

一个异步验证器函数或其数组。

A single async validator or array of async validator functions.

可选. 默认值是 `undefined`.
返回值

FormControl

使用说明

把控件初始化为禁用状态
Initialize a control as disabled

下面的例子返回一个带有初始值并已禁用的控件。

The following example returns a control with an initial value in a disabled state.

      
      import {Component, Inject} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
/* . . . */
@Component({
  selector: 'app-disabled-form-control',
  template: `
    <input [formControl]="control" placeholder="First">
  `
})
export class DisabledFormControlComponent {
  control: FormControl;

  constructor(private fb: FormBuilder) {
    this.control = fb.control({value: 'my val', disabled: true});
  }
}

array()

构造一个新的 FormArray 实例。

Constructs a new FormArray from the given array of configurations, validators and options.

      
      array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormArray
参数
controlsConfig any[]

一个子控件数组。每个子控件的 key 都是它在数组中的索引。

An array of child controls or control configs. Each child control is given an index when it is registered.

validatorOrOpts ValidatorFn | AbstractControlOptions | ValidatorFn[]

一个同步验证器函数或其数组，或者一个包含验证器函数和验证触发器的 AbstractControlOptions 对象。

A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.

可选. 默认值是 `undefined`.
asyncValidator AsyncValidatorFn | AsyncValidatorFn[]

一个异步验证器函数或其数组。

A single async validator or array of async validator functions.

可选. 默认值是 `undefined`.
返回值

FormArray