Angular2 - 動態表單輸入

我從我的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生成動態的輸入，從而使我的表格可以看到並跟蹤值？

來源

2016-09-22 Miura-shi

你需要讓你的API響應，而不是建設'ngOnInit' – ranakrunal9

你能給一個基本的後動態生成該窗體那個例子？ –

你真的應該分開你的表單輸入。您不應該使用任何類型的標識符來命名您的輸入（即; some_name_ID）。如果您將表單輸入移動到自己的組件中，該組件使用數據模型中的值，則可以使用'ngFor'將每個項目傳遞到該組件，以迭代您的json對象。 –

你應該在你formBuilder.group創建daynamic名，您可以使用：

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] 
    }); 
    } 
    }

來源

2016-10-11 09:46:24

Angular2 - 動態表單輸入

回答

相關問題