Angular4 Reactive嵌套表单问题

Posted 2023-03-13

【中文标题】Angular4 Reactive嵌套表单问题

【英文标题】：Angular4 Reactive nested form issue

【发布时间】：2018-01-21 08:15:33

【问题描述】：

我正在使用 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="projectnamei" name="projectnamei"  [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="sundayi" name="sundayi"  [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);
        
      

    

【问题讨论】：

快速查看您的代码，我们至少可以确定您正在尝试在模板中显示一个名为 projectname 的表单控件，即使您的表单中没有这样的表单控件:) 同样适用表单控件sunday.

为 formcontrol 提供索引值，我只得到最后一个输入表数据输入元素

我不太明白这个评论。但是不管怎样，template中的表单控件必须匹配form中的表单控件，而现在不匹配。

【参考方案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() 来代替您的表单控件。

【讨论】：

结构相同，但我想在行内的每个表数据中添加和删除按钮。如果用户单击添加按钮，我需要创建另一个表行

是的，你可以这样做。只需为添加和删除设置一个按钮并为此执行适当的方法:)

提交表单后我无法检索到 formGroup 数据

在这里工作正常，当控制台在单击按钮后登录时......plnkr.co/edit/qraDXUYOaOL9eClTqjqh?p=preview

当用户单击 AddRow 按钮时，将再创建一个 tr 并包含相同的下拉列表和输入框，并且 AddRow 和 DeleteRow 输入元素在那里。当用户单击 AddRow 按钮时，它会创建相同的表行。一个用户停止创建表行并从所有列输入数据并单击提交按钮我无法检索数据。这是我的问题