FormGroupName — Angular

Синхронизирует вложенный FormGroup или FormRecord с элементом DOM.

API

class FormGroupName extends AbstractFormGroupDirective implements OnInit ,OnDestroy {
  constructor(parent: ControlContainer, validators: (ValidatorFn | Validator)[], asyncValidators: (AsyncValidatorFn | AsyncValidator)[]): FormGroupName;
  @Input('formGroupName') name: string | number | null;
  override readonly control: FormGroup<any>;
  override readonly path: string[];
  override readonly formDirective: Form | null;
  override readonly value: any;
  override readonly valid: boolean | null;
  override readonly invalid: boolean | null;
  override readonly pending: boolean | null;
  override readonly disabled: boolean | null;
  override readonly enabled: boolean | null;
  override readonly errors: ValidationErrors | null;
  override readonly pristine: boolean | null;
  override readonly dirty: boolean | null;
  override readonly touched: boolean | null;
  override readonly status: string | null;
  override readonly untouched: boolean | null;
  override readonly statusChanges: any;
  override readonly valueChanges: any;
  override readonly validator: ValidatorFn | null;
  override readonly asyncValidator: AsyncValidatorFn | null;
  override reset(value?: any): void;
  override hasError(errorCode: string, path?: string | (string | number)[] | undefined): boolean;
  override getError(errorCode: string, path?: string | (string | number)[] | undefined): any;
}

constructor

FormGroupName

@paramparentControlContainer

@paramvalidators(ValidatorFn | Validator)[]

@paramasyncValidators(AsyncValidatorFn | AsyncValidator)[]

@returnsFormGroupName

name

string | number | null

Отслеживает имя FormGroup, связанной с директивой. Имя соответствует ключу в родительской FormGroup или FormArray. В качестве имени можно указать строку или число. Строковое имя удобно для отдельных форм, а числовое позволяет связывать группы форм с индексами при переборе групп в FormArray.

control

FormGroup<any>

FormGroup, связанная с этой директивой.

path

string[]

Путь от директивы верхнего уровня до этой группы.

formDirective

Form | null

Директива верхнего уровня для этой группы, если она существует; в противном случае — null.

value

any

Возвращает значение элемента управления, если он существует; в противном случае — null.

valid

boolean | null

Показывает, является ли элемент управления допустимым. Элемент управления считается допустимым, если для его текущего значения нет ошибок валидации. Если элемент управления отсутствует, возвращается null.

invalid

boolean | null

Показывает, является ли элемент управления недопустимым, то есть содержит ли введенное значение ошибку. Если элемент управления отсутствует, возвращается null.

pending

boolean | null

Показывает, находится ли элемент управления в состоянии ожидания: выполняется асинхронная валидация, и ошибки для введенного значения еще недоступны. Если элемент управления отсутствует, возвращается null.

disabled

boolean | null

Показывает, отключен ли элемент управления, то есть отключен ли он в пользовательском интерфейсе. Отключенные элементы не участвуют в проверках валидации и исключаются из агрегированных значений элементов управления-предков. Если элемент управления отсутствует, возвращается null.

enabled

boolean | null

Показывает, включен ли элемент управления, то есть учитывается ли он при вычислении допустимости или значения элементов управления-предков. Если элемент управления отсутствует, возвращается null.

errors

ValidationErrors | null

Возвращает ошибки валидации элемента управления. Если элемент управления отсутствует, возвращается null.

pristine

boolean | null

Показывает, является ли элемент управления нетронутым, то есть изменял ли пользователь его значение в пользовательском интерфейсе. Если элемент управления отсутствует, возвращается null.

dirty

boolean | null

Показывает, изменял ли пользователь значение элемента управления в пользовательском интерфейсе. Если элемент управления отсутствует, возвращается null.

touched

boolean | null

Показывает, взаимодействовал ли пользователь с элементом управления, то есть инициировал ли для него событие blur. Если элемент управления отсутствует, возвращается null.

status

string | null

Возвращает статус валидации элемента управления. Возможные значения: 'VALID', 'INVALID', 'DISABLED' и 'PENDING'. Если элемент управления отсутствует, возвращается null.

untouched

boolean | null

Показывает, не взаимодействовал ли пользователь с элементом управления, то есть не инициировал ли для него событие blur. Если элемент управления отсутствует, возвращается null.

statusChanges

any

Возвращает мультикастовый Observable, который испускает статус валидации при каждом его вычислении для элемента управления. Если элемент управления отсутствует, возвращается null.

valueChanges

any

Возвращает мультикастовый Observable изменений значения элемента управления. Он испускает значение каждый раз, когда оно изменяется в пользовательском интерфейсе или программно. Если элемент управления отсутствует, возвращается null.

validator

ValidatorFn | null

Функция синхронной валидации, объединяющая все синхронные валидаторы, зарегистрированные в этой директиве.

asyncValidator

AsyncValidatorFn | null

Функция асинхронной валидации, объединяющая все асинхронные валидаторы, зарегистрированные в этой директиве.

reset

void

Сбрасывает элемент управления, установив указанное значение, если элемент управления существует.

@paramvalueany

@returnsvoid

hasError

boolean

Показывает, есть ли у элемента управления по указанному пути заданная ошибка.

@paramerrorCodestring

Код ошибки для проверки

@parampathstring | (string | number)[] | undefined

Список имен элементов управления, указывающий путь от текущего элемента управления до элемента, в котором следует проверить наличие ошибок.

@returnsboolean

Наличие указанной ошибки у элемента управления по заданному пути.

Если элемент управления отсутствует, возвращается false.

Примечания по использованию

Например, для следующей FormGroup:

form = new FormGroup({
  address: new FormGroup({ street: new FormControl() })
});

Путь от корневой формы до элемента управления 'street' будет таким: 'address' -> 'street'.

Его можно передать этому методу в одном из двух форматов:

Массив строк с именами элементов управления, например ['address', 'street']
Список имен элементов управления, разделенных точками и записанных в виде одной строки, например 'address.street'

Если путь не указан, этот метод проверяет наличие ошибки у текущего элемента управления.

getError

any

Возвращает данные об ошибке для элемента управления по указанному пути.

@paramerrorCodestring

Код ошибки для проверки

@parampathstring | (string | number)[] | undefined

@returnsany

Данные об указанной ошибке. Если элемент управления или ошибка отсутствуют, возвращается null.

Примечания по использованию

Например, для следующей FormGroup:

form = new FormGroup({
  address: new FormGroup({ street: new FormControl() })
});

Путь от корневой формы до элемента управления 'street' будет таким: 'address' -> 'street'.

Его можно передать этому методу в одном из двух форматов:

Массив строк с именами элементов управления, например ['address', 'street']
Список имен элементов управления, разделенных точками и записанных в виде одной строки, например 'address.street'

Описание

Синхронизирует вложенный FormGroup или FormRecord с элементом DOM.

Эту директиву можно использовать только с родительской FormGroupDirective.

Директива принимает строковое имя вложенной FormGroup или FormRecord, с которой нужно связать элемент, и ищет зарегистрированную с этим именем FormGroup или FormRecord в экземпляре родительской FormGroup, переданном в FormGroupDirective.

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

Экспортируется из

ReactiveFormsModule

Примечания по использованию

Доступ к группе по имени

В следующем примере используется метод AbstractControl.get для доступа к связанной FormGroup

  this.form.get('name');

Доступ к отдельным элементам управления в группе

В следующем примере используется метод AbstractControl.get для доступа к отдельным элементам управления в группе с помощью синтаксиса с точками.

  this.form.get('name.first');

Регистрация вложенной FormGroup.

В следующем примере внутри существующей FormGroup регистрируется вложенная FormGroup с именем name, а также предоставляются методы для получения вложенной FormGroup и отдельных элементов управления.

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

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      @if (name.invalid) {
        <p>Name is invalid.</p>
      }
      <div formGroupName="name">
        <input formControlName="first" placeholder="First name" />
        <input formControlName="last" placeholder="Last name" />
      </div>
      <input formControlName="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>

    <button (click)="setPreset()">Set preset</button>
  `,
  standalone: false,
})
export class NestedFormGroupComp {
  form = new FormGroup({
    name: new FormGroup({
      first: new FormControl('Nancy', Validators.minLength(2)),
      last: new FormControl('Drew', Validators.required),
    }),
    email: new FormControl(),
  });

  get first(): any {
    return this.form.get('name.first');
  }

  get name(): any {
    return this.form.get('name');
  }

  onSubmit() {
    console.log(this.first.value); // 'Nancy'
    console.log(this.name.value); // {first: 'Nancy', last: 'Drew'}
    console.log(this.form.value); // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
    console.log(this.form.status); // VALID
  }

  setPreset() {
    this.name.setValue({first: 'Bess', last: 'Marvin'});
  }
}