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名を作成する必要があり、あなたはそれを使用することができます
あなたのAPIレスポンスを得る代わりに、 'ngOnInit' – ranakrunal9
に構築した後、動的にフォームを構築する必要がありますが、基本的なもらえそれの例? –
あなたは本当にあなたのフォーム入力を分離する必要があります。あなたの入力には何らかの識別子(例えば、some_name_ID)を使用するべきではありません。フォーム・インプットをデータ・モデルから値をとる独自のコンポーネントに移動する場合、 'ngFor'を使用して各アイテムをそのコンポーネントに渡すだけでjsonオブジェクトを反復することができます。 –