Я хочу создать базовый компонент формы, который будет иметь дополнительный контроль над всеми другими формами.
Например, я хочу проверить, является ли форма грязной, когда пользователь хочет закрыть форму, илиnot.
Вот мой пример формы базового компонента:
@Component({
selector: 'my-modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.scss']
})
export class ModalFormComponent implements OnInit, AfterContentInit {
@ContentChild(FormGroup, { static: false }) usersForm: FormGroup;
constructor() { }
ngOnInit(): void {
console.log(this.usersForm);
}
ngAfterContentInit() {
console.log(this.usersForm);
}
}
А вот пример использования:
<my-modal-form>
<form [formGroup]="profileForm">
<input type="text" formControlName="firstName" />
<input type="text" formControlName="lastName" />
</form>
</my-modal-form>
Так что оба вызова console.log
дают мне undefined
. Здесь я хочу получить доступ к экземпляру FormGroup
, чтобы проверить, грязный он или нет.
Вопрос в том, как правильно получить доступ к спроектированной форме (FormGroup)?