Я пытаюсь получить вложенную форму с проверкой в Angular 2, я видел сообщения и следил за документацией, но я действительно борется, надеюсь, что вы можете указать мне в правильном направлении.
То, что я пытаюсь достичь, - это иметь проверенную форму с несколькими дочерними компонентами. Эти компоненты для детей немного сложны, некоторые из них имеют больше компонентов для детей, но, ради вопроса, я думаю, что мы можем атаковать проблему с родителем и детьми.
Что я пытаюсь выполнить
Имея форму, которая работает следующим образом:
<div [formGroup]="userForm" novalidate>
<div>
<label>User Id</label>
<input formControlName="userId">
</div>
<div>
<label>Dummy</label>
<input formControlName="dummyInput">
</div>
</div>
Для этого требуется наличие такого класса:
private userForm: FormGroup;
constructor(private fb: FormBuilder){
this.createForm();
}
private createForm(): void{
this.userForm = this.fb.group({
userId: ["", Validators.required],
dummyInput: "", Validators.required]
});
}
Это работает так, как ожидалось, но теперь я хочу развязать код и поместить функцию "dummyInput" в отдельный, другой компонент. Здесь я теряюсь. Это то, что я пробовал, я думаю, что я не далеко от ответа, но у меня действительно нет идей, я довольно новичок в этой сцене:
parent.component.html
<div [formGroup]="userForm" novalidate>
<div>
<label>User Id</label>
<input formControlName="userId">
</div>
<div>
<dummy></dummy>
</div>
</div>
parent.component.ts
private createForm(): void{
this.userForm = this.fb.group({
userId: ["", Validators.required],
dummy: this.fb.group({
dummyInput: ["", Validators.required]
})
});
children.component.html
<div [formGroup]="dummyGroup">
<label>Dummy Input: </label>
<input formControlName="dummyInput">
</div>
children.component.ts
private dummyGroup: FormGroup;
Я знаю, что с кодом что-то не так, но я действительно в блокпосте. Любая помощь будет оценена.
Спасибо.
