角度：私はこれらのリンクからチュートリアルを以下の午前

Question

こんにちはリフォーム

Cannot find control with path: 'fields -> personName 

ここではHTMLイムは、現在、私に取り組んでいますよ私がチュートリアルにちょうど従って以来、何が原因でエラーが発生しているのかわからない

<form [formGroup]="createDirectoryForm" novalidate (ngSubmit)="save()"> 
    <div class="spacer-30"></div> 
    <div class="form-group1"> 
    <div class="row"> 
     <input type="text" formControlName="directoryName" placeholder="Directory Name" /> 
    </div> 
    </div> 
    <div class="spacer-20"></div> 
    <div class="form-group2" formArrayName="fields"> 
    <div *ngFor="let field of createDirectoryForm.controls.fields.controls; let i=index" class="panel"> 
    <div class="row"> 
     <input type="text" formControlName="number" placeholder="Number" /> 
    </div> 
    <div class="spacer-10"></div> 
    <div class="row"> 
     <input type="text" formControlName="personName" placeholder="Name" /> 
    </div> 
    <div class="row"> 
     <input type="text" formControlName="age" placeholder="Age" /> 
    </div> 
    <div class="spacer-10"></div> 
    <div class="row"> 
     <input type="text" formControlName="address" placeholder="Address" /> 
    </div> 
    </div> 
    </div> 
    <div class="margin-20"> 
      <div>myForm details:-</div> 
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre> 
      <pre>form value: <br>{{myForm.value | json}}</pre> 
     </div> 
    </form> 

コンポーネント

import { Component, OnInit } from '@angular/core'; 
import { NavController, NavParams, ViewController } from 'ionic-angular'; 
import { FormGroup, FormArray, FormBuilder, FormControl, Validators } from '@angular/forms'; 
import{Directory} from './directoryInfo.interface' 

/** 
* Generated class for the ModalCreateNewDirectoryPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 


@Component({ 
    selector: 'page-modal-create-new-directory', 
    templateUrl: 'modal-create-new-directory.html', 
}) 
export class ModalCreateNewDirectoryPage implements OnInit { 

    createDirectoryForm: FormGroup; 
    //directoryInfo: {directoryName: string, number: string, personName: string, age: string, address: string,} = {directoryName:'',number: '', personName: '', age: '', address:''}; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public newDirectoryView:ViewController, private formBuilder: FormBuilder) { 

    } 

    ngOnInit(){ 
     this.createDirectoryForm = this.formBuilder.group({ 
      directoryName:['',Validators.required], 
      fields: this.formBuilder.array([ 
       [''], 
      ]) 

     }); 
    } 

    /*ngOnInit(){ 
     this.createDirectoryForm = this.formBuilder.group({ 
      directoryName:[''], 
      number:['',Validators.required], 
      personName: [''], 
      age:[''], 
      address:[''], 
     }); 
    }*/ 

    initFormChild() { 
     return this.formBuilder.group({ 
      number:['',Validators.required], 
      personName: [''], 
      age:[''], 
      address:[''], 
     }); 
    } 

    addFormChild() { 
     const control = <FormArray>this.createDirectoryForm.controls['fields']; 
     control.push(this.formBuilder.control([''])); 
    } 

    save(form){ 
    console.log('asdas'); 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad ModalCreateNewDirectoryPage'); 
    } 

    closeNewDirectoryModal(){ 
    this.newDirectoryView.dismiss(); 
    } 



} 

だけでなく、私は少し変更されたが、まだガイド

export interface Directory { 
    directoryName: string; 
    fields: Field[]; 
} 

export interface Field { 
    number: string; 
    personName: string; 
    age: string; 
    address:string; 
} 

に基づいて必要なインターフェイスは、私が実際に何人かの人々がこの問題を解決するが、それは彼らがそれをやったか非常に明確ではありません見て。どんな提案も大歓迎です。ありがとう。

Answer 1

私がやっていたことは正しいことが分かりました。私のHTMLが正しくフォーマットされておらず、それがForm Builderのエラーの原因になっています。