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
}

参见

说明

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 | { [key: string]: any; } = null): FormGroup
      
      group(controlsConfig: { [key: string]: any; }, options: AbstractControlOptions | { [key: string]: any; } = null): FormGroup
参数
controlsConfig object

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

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

options AbstractControlOptions | { [key: string]: any; }

FormGroup 的配置项对象。该对象可以有两种形态：

Configuration options object for the FormGroup. The object can have two shapes:

1) AbstractControlOptions 对象（首选），它包括如下属性：

1) AbstractControlOptions object (preferred), which consists of:

  • 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')

2) 传统的配置对象，它包括如下属性：

2) Legacy configuration object, which consists of:

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

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

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

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

可选. 默认值是 null.

返回值

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
      
      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}); } }
      
      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
      
      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