2016-09-22 7 views
2

私は私のAPI呼び出しから次のオブジェクトを返しています:Angular2 - ダイナミックフォームの入力

"users": [ 
     { 
     "id": 1, 
     "name": "John", 
     "email": "[email protected]", 
     "created_at": "2016-09-08 03:53:43", 
     "updated_at": "2016-09-09 15:05:13", 
     "company_status": { 
      "status": "1" 
     } 
     }, 
     { 
     "id": 2, 
     "name": "Moderator", 
     "email": "[email protected]", 
     "created_at": "2016-09-08 15:26:20", 
     "updated_at": "2016-09-08 15:26:25", 
     "company_status": { 
      "status": "0" 
     } 
     } 
    ] 

私はそうのような動的フォーム入力を作成するためにそれをループにしようとしている:

<tr *ngFor="let user of users"> 
    <td><input formControlName="user_name" class="form-control" type="text" name="user_name"></td> 
    <td><input formControlName="user_email" class="form-control" type="text" name="user_email"></td> 
    <td> 
    <div class="input-switch"> 
     <input [attr.id]="'toggle_' + user.id" [formControlName]="'user_status_' + user.id" class="toggle" type="checkbox" value="{{ user.company_status.status }}"> 
     <label [attr.for]="'toggle_' + user.id" class="input-toggle-xs"></label> 
    </div> 
    </td> 
</tr> 

しかし、コンポーネントの私のngOnIitメソッドでは、私はそのようなフォームを最初に構築します:

ngOnInit() { 
     // Build the form 
     this.companyForm = this.formBuilder.group({ 
      'user_name' : ['', Validators.required], 
      'user_email' : ['', Validators.required] 
     }); 
     } 

ユーザーステータス入力はdyn amically、フォームビルダは、それらについて知っていないと私は次のエラーを取得する:

EXCEPTION: Error in edit.template.html:74:87 caused by: Cannot find control with name: 'user_status_1' 

は、それは私のフォームは、それらを見ると値を追跡できるように、動的な入力を生成するために、角度2で、現在は可能ですか?あなたのformBuilder.groupでdaynamic名を作成する必要があり、あなたはそれを使用することができます

+1

あなたのAPIレスポンスを得る代わりに、 'ngOnInit' – ranakrunal9

+0

に構築した後、動的にフォームを構築する必要がありますが、基本的なもらえそれの例? –

+0

あなたは本当にあなたのフォーム入力を分離する必要があります。あなたの入力には何らかの識別子(例えば、some_name_ID)を使用するべきではありません。フォーム・インプットをデータ・モデルから値をとる独自のコンポーネントに移動する場合、 'ngFor'を使用して各アイテムをそのコンポーネントに渡すだけでjsonオブジェクトを反復することができます。 –

答えて

3

ngOnInit() { 
    // Build the form 
    for(let item in users){ 
    this.companyForm = this.formBuilder.group({ 
     ['user_name' + item.id] : ['', Validators.required], 
     ['user_email' + item.id] : ['', Validators.required] 
    }); 
    } 
    } 
関連する問題