FormBuilder

Stable Class

Что это делает

Создаёт AbstractControl на основе заданной пользователем конфигурации.

Это по сути синтаксический сахар, который сокращает new FormGroup(), new FormControl(), и new FormArray() шаблонный код, который может накапливаться в больших формах.

Как использовать

Для использования, введите FormBuilder в ваш класс компонента. Затем вы можете напрямую вызывать его методы.

import {Component, Inject} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <div formGroupName="name">
        <input formControlName="first" placeholder="First">
        <input formControlName="last" placeholder="Last">
      </div>
      <input formControlName="email" placeholder="Email">
      <button>Submit</button>
    </form>

    <p>Value: {{ form.value | json }}</p>
    <p>Validation status: {{ form.status }}</p>
  `
})
export class FormBuilderComp {
  form: FormGroup;

  constructor(@Inject(FormBuilder) fb: FormBuilder) {
    this.form = fb.group({
      name: fb.group({
        first: ['Nancy', Validators.minLength(2)],
        last: 'Drew',
      }),
      email: '',
    });
  }
}

• npm пакет: @angular/forms

• NgModule: ReactiveFormsModule

Обзор класса

class FormBuilder {
  group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}) : FormGroup
  control(formState: Object, validator?: ValidatorFn|ValidatorFn[], asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]) : FormControl
  array(controlsConfig: any[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) : FormArray
}

Описание класса

Аннотации

@Injectable()

Подробное описание класса

group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}) : FormGroup

Создаёт новый FormGroup с заданным отображением конфигурации. Допустимые ключи для параметра extra - validator и asyncValidator.

См. Конструктор FormGroup для получения более подробной информации.

control(formState: Object, validator?: ValidatorFn|ValidatorFn[], asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]) : FormControl

Создаёт новый FormControl с заданными formState, validator, и asyncValidator.

formState может быть как отдельным значением для управляемого элемента формы, так и объектом, содержащим как значение, так и состояние отключения.

array(controlsConfig: any[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) : FormArray

Создаёт FormArray из заданного массива конфигурации controlsConfig, с необязательными validator и asyncValidator.

экспортировано из @angular/forms/index, определено в @angular/forms/src/form_builder.ts