Я бы использовал реактивную форму, которая работает довольно хорошо, а что касается вашего комментария:
Есть другой простой пример для этого? Может быть, тот же пример без циклов
Я могу привести вам пример. Все, что вам нужно сделать, это вложить FormGroup и передать его дочернему элементу.
Допустим, ваша форма выглядит так, и вы хотите передать address formgroup дочернему элементу:
ngOnInit() {
this.myForm = this.fb.group({
name: [''],
address: this.fb.group({ // create nested formgroup to pass to child
street: [''],
zip: ['']
})
})
}
Затем в вашем родителе просто передайте вложенную группу форм:
<address [address]="myForm.get('address')"></address>
У вашего ребенка используйте @Input для вложенной группы форм:
@Input() address: FormGroup;
И в вашем шаблоне используйте [formGroup]:
<div [formGroup]="address">
<input formControlName="street">
<input formControlName="zip">
</div>
Если вы не хотите создавать фактическую вложенную группу форм, вам не нужно этого делать, вы можете просто передать родительскую форму дочерней, поэтому, если ваша форма выглядит так:
this.myForm = this.fb.group({
name: [''],
street: [''],
zip: ['']
})
вы можете передать любые элементы управления, которые захотите. Используя тот же пример, что и выше, мы хотели бы показать только street и zip, дочерний компонент останется таким же, но дочерний тег в шаблоне будет выглядеть так:
<address [address]="myForm"></address>
Вот
Демо из первый вариант, вот второй Демо
Дополнительная информация здесь о вложенных формах на основе моделей.
person
AJT82
schedule
07.04.2017
