Для проверки валидности формы в дочернем элементе из родительского элемента в Angular, можно использовать следующий подход.
1. Назначьте дыхательное отверстие (output) из дочернего элемента, чтобы оповестить родительский элемент о валидности формы. Для этого в дочернем элементе добавьте Output декоратор к сигнатуре класса и определите событие, которое будет вызываться, когда валидность формы изменяется. Например:
import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: '...', }) export class ChildComponent { @Output() formValidityChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); // ... код компонента ... }
2. В дочернем элементе следите за изменениями валидности формы. Для этого добавьте обработчик события валидности формы и вызовите событие formValidityChanged
, чтобы оповестить родительский элемент о изменении валидности формы. Например:
import { Component, Output, EventEmitter } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-child', template: '...', }) export class ChildComponent { @Output() formValidityChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ // ... определение полей формы ... }); this.form.valueChanges.subscribe(() => { this.formValidityChanged.emit(this.form.valid); }); } // ... код компонента ... }
3. В родительском элементе определите обработчик события и проверьте валидность формы. Привяжите этот обработчик к событию formValidityChanged
дочернего элемента. Например:
import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: '<app-child (formValidityChanged)="onFormValidityChanged($event)"></app-child>', }) export class ParentComponent { isFormValid: boolean = false; onFormValidityChanged(isValid: boolean): void { this.isFormValid = isValid; // ... код для выполнения при изменении валидности формы ... } // ... код компонента ... }
Теперь, когда дочерний элемент отправляет событие formValidityChanged
, родительский элемент получает это событие через привязку и может обработать его, обновив значение isFormValid
, или выполнив другую логику, зависящую от валидности формы.
Надеюсь, это поможет вам проверить валидность формы в дочернем элементе из родительского элемента в Angular! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.