Question

在Ionic2 / Angular2中，我很难让FormGroup和FormGroupName使用嵌套Components，不断收到错误。< / p>

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按预期工作。希望这有助于其他人！

Ionic2 / Angular2表单与FormGroup嵌套组件

1 个答案: