NgModelGroup — Angular

Создаёт экземпляр FormGroup и связывает его с элементом DOM.

API

class NgModelGroup extends AbstractFormGroupDirective implements OnInit ,OnDestroy {
  constructor(parent: ControlContainer, validators: (ValidatorFn | Validator)[], asyncValidators: (AsyncValidatorFn | AsyncValidator)[]): NgModelGroup;
  @Input('ngModelGroup') name: string;
  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

NgModelGroup

@paramparentControlContainer

@paramvalidators(ValidatorFn | Validator)[]

@paramasyncValidators(AsyncValidatorFn | AsyncValidator)[]

@returnsNgModelGroup

name

string

Отслеживает имя NgModelGroup, связанной с директивой. Имя соответствует ключу в родительской NgForm.

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 и связывает его с элементом DOM.

Эту директиву можно использовать только как дочерний элемент NgForm (внутри тегов <form>).

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

Задайте имя для вложенной группы — оно станет её ключом в полном значении формы. Если вам нужен прямой доступ, экспортируйте директиву в локальную переменную шаблона с помощью ngModelGroup (например, #myGroup="ngModelGroup").

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

FormsModule

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

Использование элементов управления в группе

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

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      @if (nameCtrl.invalid) {
        <p>Name is invalid.</p>
      }
      <div ngModelGroup="name" #nameCtrl="ngModelGroup">
        <input name="first" [ngModel]="name.first" minlength="2" />
        <input name="middle" [ngModel]="name.middle" maxlength="2" />
        <input name="last" [ngModel]="name.last" required />
      </div>

      <input name="email" ngModel />
      <button>Submit</button>
    </form>

    <button (click)="setValue()">Set value</button>
  `,
  standalone: false,
})
export class NgModelGroupComp {
  name = {first: 'Nancy', middle: 'J', last: 'Drew'};

  onSubmit(f: NgForm) {
    console.log(f.value); // {name: {first: 'Nancy', middle: 'J', last: 'Drew'}, email: ''}
    console.log(f.valid); // true
  }

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