Angular4 Reactive嵌套表单问题

Question

我正在使用 Angular 4 反应式创建嵌套表单。我的表单结构如下所示

• 表单组（用户表单）

• FormArray(用户)

• FormGroup(idx)

在完整的 table 中，位于 Form Group 下，每个 table 行 位于 FormArray(users) 下，每个表格数据单元格位于 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。

通过以上内容，您现在在表单数组中拥有了两个表单控件。当您想在表格中添加新的表单组（行）时，您还可以调用 initUsers()。

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

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

做：

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

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

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