Как добавить валидацию в input находящийся в дочернем компоненте?

Для добавления валидации в input, который находится в дочернем компоненте в Angular, нужно следовать нескольким шагам:

1. Создайте дочерний компонент, в котором будет содержаться input, например, "ChildComponent".

2. В этом дочернем компоненте объявите поле формы FormGroup и инпут FormControl, а также настройте их через методы FormBuilder из "@angular/forms". Например:

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

@Component({
  selector: 'app-child',
  template: `
    <input [formControl]="inputControl" [placeholder]="placeholder">
    <div *ngIf="inputControl.invalid && (inputControl.dirty || inputControl.touched)">
      <div *ngIf="inputControl.errors.required">
        Input required!
      </div>
      <div *ngIf="inputControl.errors.pattern">
        Input should match the pattern [a-z]+
      </div>
    </div>
  `
})
export class ChildComponent {
  @Input() placeholder: string;

  inputControl: FormControl;

  constructor(private fb: FormBuilder) {
    this.inputControl = fb.control('', [Validators.required, Validators.pattern('[a-z]+')]);
  }
}

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

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

@Component({
  selector: 'app-parent',
  template: `
    <form>
      <app-child [placeholder]="'Enter text'" formControlName="childInput"></app-child>
    </form>
  `
})
export class ParentComponent {}

Обратите внимание, что я использовал директиву formControlName, чтобы связать поле формы дочернего компонента с родительским компонентом.

Теперь добавление валидации в input, находящийся в дочернем компоненте, будет работать. В этом примере добавлена проверка на обязательное поле и на соответствие паттерну [a-z]+. Если условия не соблюдаются, будут показаны соответствующие сообщения об ошибках.