angular2 - проверка FormControlName в дочернем компоненте родительской группы FormGroup

Question

У меня есть угловой компонент, соответствующий форме/странице, которая генерирует неопределенное количество дочерних компонентов, каждая из которых представляет отдельное поле, и я хотел бы, чтобы FormGroup родительского компонента проверил поля, содержащиеся в дочерних компонентах. Только тогда, когда я делаю это, я получаю сообщение об ошибке:

A FormControlName must have a corresponding FormGroup.

Вот код шаблона для моего родительского компонента:

<div class="form-group" [formGroup]="parentGroup"> 
    <table> 
    <tbody> 
     <tr *ngFor="let i of array"> 
     <child [property]="i" [options]="myForm.controls[i.id]"></child> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Форма определяется в файле компонента здесь. Я сложением FormControls согласно тому, как много дочерних компонентов мы добавляем:

private formAttrs: FormGroup; 

constructor(private _fb: FormBuilder) { } 

ngOnInit() { 
    this.myForm = this._fb.group({}); 
    for (var i = 0; i < this.array.length; i++) { 
    this.formAttrs.addControl(this.array[i].id, new FormControl(this.array[i].value, Validators.required)); 
    } 
} 

шаблон кода для компонента ребенка заключается в следующем:

<td class="prompt"> 
    {{i.label}} 
</td> 
<td class="required" width="1%"> 
    <span *ngIf="property.required">*</span> 
</td> 
<td> 
    <input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="property.id"> 
</td> 
<td> 

Хотя нет ничего определено в классе дочерних компонентов (кроме свойства «свойство» и элемента FormControl, переданного для «параметров»), я бы подумал, что formGroup в родительском компоненте сможет соответствовать с formControlName в дочернем компоненте, но вместо этого я получить ошибку:

EXCEPTION: Error in ./ChildComponent class ChildComponent - inline 
template:7:109 caused by: formControlName must be used with a parent 
formGroup directive. You'll want to add a formGroup directive and pass 
it an existing FormGroup instance (you can create one in your class). 

Есть ли способ обойти эту ошибку? Если нет, есть ли другое решение этой проблемы, которое кто-то может предложить?

Заранее спасибо.

Answer 1

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

Вам необходимо объявить собственную группу форм для каждого дочернего компонента, а затем вы можете перебирать ее в родительском компоненте на основе вашего ссылочного атрибута. Вы можете получить управление каждой дочерней формой с помощью метода директивных компонентов FormGroupDirective.getControl(controlName), как вы можете видеть в документации: https://angular.io/docs/ts/latest/api/forms/index/FormGroupDirective-directive.html

Answer 2

Есть несколько вещей, которые я натолкнулся на реализацию этого в Plunker.

Во-первых, нам нужно будет пройти в нашем formGroup от родителя к ребенку так, у нас есть FormGroup для удовлетворения исполнения шаблонного двигателя из FormControls, являющихся частью FormGroup:

child.component. ц

@Input() parentGroup: FormGroup; 

child.component.html

<td [formGroup]="parentGroup"> 
<...> 
</td> 

Затем нам также необходимо установить [formControl]или оценить property.id, в противном случае он ищет название «собственность».Идентификатор ":

<input type="text " class="form-control" [ngClass]="{error: !options.valid}" [formControl]="options"/> 

или

<input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="{{property.id}}"/> 

Ваш код использует различные переменные, связывающие formGroup и с помощью formAttrs, который был немного неясно, что происходит, поэтому я пошел вперед и разрушилась их к одному и вы можете видеть, что в Plunker: http://plnkr.co/edit/3MRiO9bGNFAkN2HNN7wg?p=preview