Angular2 - Dynamic Form Inputs

Question

I am returning the following object from my API call:

"users": [
      {
        "id": 1,
        "name": "John",
        "email": "john@company",
        "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"
        }
      }
    ]

I'm trying to loop through it to create dynamic form inputs as so:

<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>

But in my ngOnIit method on the component, I build the form initially as such:

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

Since the user status inputs are generated dynamically, the form builder does not know about them and I get the following error:

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

Is it currently possible in Angular 2 to generate dynamic inputs so that my form can see them and keep track of the values?

Answer 1

You should create a daynamic name in your formBuilder.group,You can use that:

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