Ionic2/Angular2 Формы С FormGroup Для вложенных компонентов

Question

В Ionic2/Angular2, я изо всех сил, чтобы получить FormGroup и FormGroupName работать с вложенными Components, продолжаю получать ошибки как.

Cannot find control with path: 'location -> latitude' 

Страница Form предоставляет динамический список полей.

<form [formGroup]="formGroup" (ngSubmit)="postForm()"> 
    <ion-list> 
    <ion-item *ngFor="let field of fields"> 
     <field-location [field]="field" [formGroup]="formGroup" *ngIf="field.input == 'location'"></field-location> 
     <!-- OTHER FIELD TYPES HERE --> 
    </ion-item> 
    </ion-list> 
</form> 

Form класс создает FormGroup и FormControl элементы в ionViewDidLoad.

this.formGroup = new FormGroup({}); 
for (let index in this.fields) { 
    let field = this.fields[index]; 
    if (field.input == 'location') { 
    this.formGroup.addControl(field.key, new FormGroup({ 
     latitude: new FormControl(''), 
     longitude: new FormControl('')})); 
    } 
    else { 
    this.formGroup.addControl(attribute.key, new FormControl('')); 
    } 
} 

Location класс определяет field и formGroup в качестве входных сигналов.

@Component({ 
    selector: 'field-location', 
    templateUrl: 'location.html', 
    inputs: ['field', 'formGroup'] 
}) 
export class LocationComponent { 
    field: any = {}; 
    formGroup: FormGroup; 
    constructor() { 
    } 
} 

Location вид принимает FormGroup как Input и использует поле Key как formGroupName.

<ion-item [formGroup]="formGroup" *ngIf="formGroup"> 
    <ion-label>{{field.label}}</ion-label> 
    <div [formGroupName]="field.key"> 
    <ion-input type="text" hidden [formControlName]="latitude"></ion-input> 
    <ion-input type="text" hidden [formControlName]="longitude"></ion-input> 
    </div> 
</ion-item> 

Как вы получаете formGroupName работать в гнездовой Components? Вам нужно также передать вложенные FormGroup из родителя?

Answer 1

Хорошо, я нашел проблему, поэтому обмен решением на тот случай, если он помогает другим.

Похоже, что проблема была связана с привязкой к [formControlName]="latitude".

<ion-item [formGroup]="formGroup" *ngIf="formGroup"> 
    <ion-label>{{field.label}}</ion-label> 
    <div [formGroupName]="field.key"> 
    <ion-input type="text" hidden [formControlName]="latitude"></ion-input> 
    <ion-input type="text" hidden [formControlName]="longitude"></ion-input> 
    </div> 
</ion-item> 

Но это должно просто быть formControlName="latitude".

<ion-item [formGroup]="formGroup" *ngIf="formGroup"> 
    <ion-label>{{field.label}}</ion-label> 
    <div [formGroupName]="field.key"> 
    <ion-input type="text" hidden formControlName="latitude"></ion-input> 
    <ion-input type="text" hidden formControlName="longitude"></ion-input> 
    </div> 
</ion-item> 

После внесения этих изменений, вложенной Component работает, как ожидалось. Надеюсь, это поможет кому-то еще!