Разработчики angular, как правило знают, что для работы с формами существует два подхода: reactive forms и template driven forms. Также, хорошо известно, что для работы с формами разработан такой функционал как валидация, однако исчерпывающе описано его применения для подхода reactive forms. Давайте рассмотрим как можно получить те же преимущества для template driven подхода.

Допустим, у нас есть поле ввода.

<input [(ngModel)]="item.name" />

Мы хотим, чтобы оно было не менее N символов в длину, а в случае ошибки - добавить класс error. Конечно, можно сделать это напрямую, но давайте воспользуемся механизмом валидации angular. Создадим функцию валидатор.

export function minLengthValidator(minLength: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if(control.value?.length >= 3) {
      return null;
    }
    return {
      minLength: `Min length is ${minLength}`
    };
  };
}

Далее, чтобы добавить валидатор в шаблоне компонента - создадим директиву

@Directive({
  selector: '[appMinLength]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: MinLengthDirective,
      multi: true,
    },
  ],
})
export class MinLengthDirective implements Validator {
  @Input() appMinLength: number;

  validate(control: AbstractControl): ValidationErrors | null {
    if (this.appMinLength === null || this.appMinLength === undefined || this.appMinLength < 1) {
      return null;
    }
    return minLengthValidator(this.appMinLength)(control);
  }
}

Теперь мы можем использовать валидатор через директиву в шаблоне

<input [(ngModel)]="item.name" [appMinLength]="10" />

Благодаря тому что у директивы NgModel указано свойство exportAs, мы можем получить к ней доступ в шаблоне, вот как это выглядит в исходниках angular

@Directive({
  selector: '[ngModel]:not([formControlName]):not([formControl])',
  providers: [formControlBinding],
  exportAs: 'ngModel'
})
export class NgModel extends NgControl implements OnChanges, OnDestroy

Тут же мы видим, что NgModel наследует от NgControl.

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

<input #model="ngModel" 
       [(ngModel)]="item.name" 
       [appMinLength]="10" 
       [class.error]="model.control.invalid && model.control.touched" />

Уже недурно, но давайте рассмотрим случай, когда часть редактируемых полей находится в дочерних компонентах, а мы хотим управлять всем этим делом из родительского. Например у нас есть модель данных, которая содержит массив дочерних элементов, каждый из которых мы хотим провалидировать и, допустим, не дать сохранить данные если что-то заполнено неверно.

export interface MyModel {
  name: string;
  items: MyItem[];
}

export interface MyItem {
  name: string;
  age: number;
}

Далее рассмотрим компонент формы

@Component({
  selector: 'app-my-form',
  template: `<form #form>
              <div class="row">
                <div style="width: 70px;">name:</div>
                <input [class.error]="model.control.invalid && model.control.touched"
                        #model="ngModel"
                        type="text"
                        required
                        [appMinLength]="10"
                        [(ngModel)]="data.name"
                        name="name" />
              </div>
              <div>Items:</div>
              <app-my-item [item]="item" *ngFor="let item of data.items"></app-my-item>
              <div>
                <button type="button" (click)="save()">Save</button>
                <button type="button" (click)="add()">Add</button>
              </div>
            </form>`,
  styleUrls: ['./my-form.component.css'],
  imports: [FormsModule, MyItemComponent, CommonModule, MinLengthDirective],
  standalone: true,
})
export class MyFormComponent {
  @ViewChild(NgForm) form: NgForm;

  data: MyModel = {
    name: '',
    items: [
      {
        age: null,
        name: '',
      },
    ],
  };

  save() {
    console.log(this.form.controls);
  }

  add() {
    this.data.items.push({
      name: '',
      age: null,
    });
  }
}

И компонент для элемента списка

@Component({
  selector: 'app-my-item',
  template: `<div class="row">
              <div style="width: 70px;">name:</div>
                <input [class.error]="nameModel.control.invalid && nameModel.control.touched"
                        #nameModel="ngModel" 
                        type="text" 
                        required
                        [appMinLength]="10"
                        [(ngModel)]="item.name" />
              </div>
              <div class="row">
                <div style="width: 70px;">age:</div>
                <input [class.error]="ageModel.control.invalid && ageModel.control.touched"
                        type="number"
                        #ageModel="ngModel"
                        type="text"                  
                        required
                        [(ngModel)]="item.age" />
              </div>`,
  styleUrls: ['./my-item.component.css'],
  imports: [FormsModule, MinLengthDirective, CommonModule],
  standalone: true,
})
export class MyItemComponent {
  @Input() item: MyItem;
}

На данный момент наши контролы уже подсветятся ошибкой, но при нажатии на save() мы увидим только один контрол. Однако хочется получить доступ к состоянию формы с учетом дочерних компонент. Для этого, чтобы получить доступ к родительской форме нам нужно внедрить ControlContainer в дочерние компоненты. Немного изменим декларацию компонента MyItem

@Component({
  selector: 'app-my-item',
  template: `<div [ngModelGroup]="item.id.toString()">
              <div class="row">
                <div style="width: 70px;">name:</div>
                  <input [class.error]="nameModel.control.invalid && nameModel.control.touched"
                          name="name"
                          #nameModel="ngModel" 
                          type="text" 
                          required
                          [appMinLength]="10"
                          [(ngModel)]="item.name" />
                </div>
                <div class="row">
                  <div style="width: 70px;">age:</div>
                  <input [class.error]="ageModel.control.invalid && ageModel.control.touched"
                        name="age"
                        type="number"
                        #ageModel="ngModel"
                        type="text"                  
                        required
                        [(ngModel)]="item.age" />
                </div>
              </div>`,
  styleUrls: ['./my-item.component.css'],
  imports: [FormsModule, MinLengthDirective, CommonModule],
  standalone: true,
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: NgForm,
    },
  ],
})
export class MyItemComponent {
  @Input() item: MyItem;
}

Теперь у нас есть полный контроль над элементами формы, и ее состоянием, можно дописать функционал компонента формы, с валидацией и реакцией на ее состояние

@Component({
  selector: 'app-my-form',
  ...
})
export class MyFormComponent {
  ...

  save() {
    console.log(this.form.controls);
    this.form.form.markAllAsTouched();
    this.form.form.updateValueAndValidity();
    if (this.form.valid) {
      // Do the saving stuff
    }
  }

  ...
}

Полный код примера из статьи

Спасибо за внимание, надеюсь, эта информация окажется для кого-то полезной.