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]
});
}
由于用户状态输入产生达因amically,表单生成器不知道他们,我得到以下错误:
EXCEPTION: Error in edit.template.html:74:87 caused by: Cannot find control with name: 'user_status_1'
它是目前可能在角2生成动态的输入,从而使我的表格可以看到并跟踪值?
你需要让你的API响应,而不是建设'ngOnInit' – ranakrunal9
你能给一个基本的后动态生成该窗体那个例子? –
你真的应该分开你的表单输入。您不应该使用任何类型的标识符来命名您的输入(即; some_name_ID)。如果您将表单输入移动到自己的组件中,该组件使用数据模型中的值,则可以使用'ngFor'将每个项目传递到该组件,以迭代您的json对象。 –