2016-09-22 2 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 각도 동적 입력을 생성하기 위해 현재 가능을?

+1

을 당신은 기본을 줄 수 귀하의 API 응답을 얻는 대신 ngOnInit' – ranakrunal9

+0

'에서 구축 한 후 동적 양식을 구축해야 예? –

+0

정말 양식 입력을 분리해야합니다. 입력의 이름을 짓기 위해 어떤 종류의 식별자 (예 : some_name_ID)도 사용하면 안됩니다. 양식 입력을 데이터 모델에서 값을 가져 오는 자체 구성 요소로 이동하면'ngFor'를 사용하여 json 객체를 반복 할 때 각 구성 요소에 해당 항목을 전달할 수 있습니다. –

답변

3

당신은 당신의 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] 
    }); 
    } 
    }