Angular. Как валидировать input в дочернем компоненте?

В Angular валидация ввода данных в дочернем компоненте может быть достигнута с помощью встроенного модуля FormControl и его методов. Давайте рассмотрим несколько способов, которые могут быть использованы для валидации ввода данных в дочернем компоненте.

1. Создание FormControl объекта в дочернем компоненте:
В дочернем компоненте вы можете создать FormControl объект, который будет служить для отслеживания и валидации значений ввода. Вы можете сделать это внедряя объект FormControl в конструкторе компонента и привязывая его к директиве ngModel в шаблоне компонента.

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

   @Component({
     selector: 'app-child-component',
     template: `
       <input [formControl]="inputControl" [(ngModel)]="inputValue">
     `
   })
   export class ChildComponent {
     inputControl: FormControl = new FormControl();
     inputValue: string;
   }

В этом примере мы создаем FormControl объект с именем inputControl и связываем его с директивой ngModel на элементе input в шаблоне.

2. Добавление одной или нескольких встроенных валидаторов в FormControl объект:
FormControl объект имеет несколько встроенных валидаторов, которые могут быть использованы для проверки ввода данных. Например, вы можете добавить валидаторы required или minLength к FormControl объекту.

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

   @Component({
     selector: 'app-child-component',
     template: `
       <input [formControl]="inputControl" [(ngModel)]="inputValue">
     `
   })
   export class ChildComponent {
     inputControl: FormControl = new FormControl('', [Validators.required, Validators.minLength(5)]);
     inputValue: string;
   }

В этом примере мы добавляем два встроенных валидатора (required и minLength) к FormControl объекту inputControl. Теперь элемент input валидируется на предмет пустого значения и минимальной длины 5 символов.

3. Проверка состояния валидации в дочернем компоненте:
FormControl объект предоставляет ряд методов для проверки состояния его валидации. Например, вы можете использовать свойство valid, чтобы проверить, прошло ли значение валидацию.

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

   @Component({
     selector: 'app-child-component',
     template: `
       <input [formControl]="inputControl" [(ngModel)]="inputValue">
       <div *ngIf="!inputControl.valid && inputControl.touched">
         The input is invalid.
       </div>
     `
   })
   export class ChildComponent {
     inputControl: FormControl = new FormControl('', [Validators.required, Validators.minLength(5)]);
     inputValue: string;
   }

В этом примере мы добавляем div элемент в шаблоне, который отображается только в том случае, если значение в inputControl не прошло валидацию и было задетектировано (touched).

Конечно, это только некоторые из методов валидации ввода данных в Angular. Существуют и другие способы и возможности для валидации ввода данных в дочерних компонентах, такие как использование пользовательских валидаторов, использование директив ввода формы и многое другое. Подробности можно найти в документации Angular.