填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

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 提供了一個語法糖,以簡化 FormControlFormGroupFormArray 實例的建立過程。 它會減少建構複雜表單時所需的樣板程式碼的數量。

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.

方法

建構一個新的 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

建構一個新的 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});
  }
}
    

構造一個新的 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