Angular4 Reactive 嵌套表单问题

Question

我正在使用 Angular 4 reactive 来创建嵌套的 forms.My 表单结构，如下所示

表单组（用户表单）
FormArray(用户)
表格组(idx)

完整 table 进入 Form Group 和每个 table 行 属于 FormArray(users) 并且每个 table data 单元格属于 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

首先，您的表单控件与您的模板不匹配。现在在您的 users 数组中您只有一个未指定的表单控件。相反，您应该拥有在模板中显示的两个表单控件。假设你想在你的数组中有一个初始的空表单组，做：

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

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

其中 fb 指的是 FormBuilder 在构造函数中注入。

通过上面的操作，您现在在表单数组中有了两个表单控件。当您想在 table.

中添加新的表单组（行）时，您也可以调用 initUsers()

然后您需要删除模板中 formcontrolName 周围的括号，而不是

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

做：

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

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

另外值得一提的是，我看到您在模板中对 sunday 进行了 pattern 验证，将其删除并改为设置 Validators.pattern()用于您的表单控件。

Angular4 Reactive 嵌套表单问题

Angular4 Reactive nested form issue

angular

angular2-template

angular2-forms

angular-reactive-forms

angular4-forms