从 Angular 表单组中获取值

Question

我是 Angular 的新手，我正在尝试创建一个动态 table，您可以在其中添加新的列、行和数据。我遇到的问题是从表单组获取输入数据并将其推送到 table 正在读取的对象中。

初始组如下所示，每个控件显示为一列。

input = new FormGroup({
   name: new FormControl(),
   age: new FormControl(),
   height: new FormConrol()
});

因此，当您添加一列时，会使用 'input.addControl()' 添加一个新控件。

在不添加任何新列的情况下，我可以轻松地将其推送到数据源，但是说，

this.dataSource.push({name: this.input.value.name}) // and so forth

但是当添加新列时，我不知道如何将值推送到此 dataSource 变量，因为它们可以被称为任何东西。

有没有一种方法可以说迭代表单组值并像那样推动它们或沿着这些方向推...任何帮助将不胜感激。

Answer 1

您真正需要的是 FormArray 而不是 FormGroup。 FormArray 更像 Array。您可以 push 个值并从中删除值

在下面的示例中，我正在实施 FormBuilder 以生成 FormGroup 和 FormArray

export class AppComponent {
 
  addInput({ name, age, height }: IFormItem = {}) {
    this.inputs.push(
      this.fb.group({
        name: [name, []],
        age: [age, []],
        height: [height, []]
      })
    );
  }
  removeInput(i: number) {
    this.inputs.removeAt(i);
    this.inputs.updateValueAndValidity();
    this.myForm.updateValueAndValidity();
  }
  myForm = this.fb.group({
    inputs: this.fb.array([])
  });

  get inputs() {
    return this.myForm.get("inputs") as FormArray;
  }
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.addInput({
      name: 'Test Name',
      age: 5,
      height: 45
    });
    this.addInput();
  }
}

在HTML

<form [formGroup]='myForm'>
  <button (click)='addInput()'>Add</button>
  <table formArrayName='inputs'>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
    </tr>
    <tr *ngFor="let input of inputs.controls; let i = index" [formGroupName]='i'>
      <td>{{ i + 1}}</td>
      <td><input formControlName='name'></td>
      <td><input formControlName='age'></td>
      <td><input formControlName='height'></td>
      <td><button (click)='removeInput(i)'>Delete</button></td>
    </tr>
 </table>
</form>

See this stackblitz demo

从 Angular 表单组中获取值

Getting values out of Angular form group

angular

angular-forms

formgroups