Angular4反应嵌套形式问题

Question

我使用角4反应，以创建嵌套forms.My形式的结构如下图所示

• 表单组（用户窗体）

• FormArray（用户）

• FormGroup（idx）

完整表来下表组和每个表行下FormArray（用户）来并且每个表数据细胞来Formgroup（IDX）下。

错误：

appComponent.html:20 ERROR Error: Cannot find control with path: 'users -> 0 -> ' 

HTML：

<form [formGroup]="userForm" (ngSubmit)="onFormSubmit()"> 
    <tbody formArrayName="users"> 
     <tr *ngFor="let user of users.controls; index as idx"> 
      <div [formGroupName]="idx"> 
      <td> 
      <div class="mdl-select mdl-js-select mdl-select--floating-label"> 
      <select class="mdl-select__input" id="projectname{{i}}" name="projectname{{i}}" [formControlName]="projectname"> 
       <option *ngFor="let project of projects;let first=first;let last:last">{{project.projectname}}</option> 
      </select> 
      <label class="mdl-select__label" for="professsion">Select Project Name</label> 
      </div> 
      </td> 
      <td> 
      <div class="mdl-textfield mdl-js-textfield"> 
       <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sunday{{i}}" name="sunday{{i}}" [formControlName]="sunday"> 
       <span class="mdl-textfield__error">Digits only</span> 
      </div> 
      </td> 
    </tr> 
    </table> 
</form> 

TS：

export class appComponent implements OnInit { 

    ngOnInit() { 

    } 

    userForm = new FormGroup({ 

     users: new FormArray([ 
       new FormControl() 
      ]) 
     }); 

     get userName(): any { 
     return this.userForm.get('name'); 
     } 
     onFormSubmit(): void { 
     this.logData(); 
     } 
     get users(): FormArray { 
     return this.userForm.get('users') as FormArray; 
     } 
     addUserField() { 
     this.users.push(new FormControl()); 
     } 
     deleteUserField(index: number) { 
     this.users.removeAt(index); 
     } 

     logData(){ 
     for(let i = 0; i < this.users.length; i++) { 
      console.log(this.users.at(i).value); 
     } 
     } 

    } 

Answer 1

首先，你的窗体控件不匹配您的TE mplate。现在在你的users数组中，你只有一个未指定的表单控件。相反，您应该有模板中显示的两个表单控件。 Assumingly你想要一个初始空单组数组中，这样做：

this.userForm = this.fb.group({ 
    users: this.fb.array([ 
    this.initUsers(); 
    ]) 
}); 

initUsers() { 
    return this.fb.group({ 
    projectname: [''], 
    sunday: [''] 
    }); 
} 

其中fb指FormBuilder注入构造。

上面你现在在窗体数组中有两个窗体控件。当您想要在表格中添加新的表单组（行）时，还可以拨打initUsers()。

然后，你需要删除围绕formcontrolName括号在你的模板，所以不是

[formControlName]="projectname" 
.... 
[formControlName]="sunday" 

做：

formControlName="projectname" 
... 
formControlName="sunday" 

DEMO：http://plnkr.co/edit/qraDXUYOaOL9eClTqjqh?p=preview

另外值得一提的是，我看到你具有pattern验证sunday在模板，remov e，并将Validators.pattern()设置为您的表单控件。