Question

Error:AppComponent.html:16 ERROR TypeError: Cannot read property 'controls' of undefined at Object.eval [as updateDirectives] (AppComponent.html:16)

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  signupForm: FormGroup;
  arr;
  ngOnInit() {

    this.arr = ["id", "name", "weight", "quantity"];

    this.signupForm = new FormGroup({
      'id': new FormArray([new FormControl('1'), new FormControl('2')]),
      'name': new FormArray([new FormControl('Beans'), new FormControl('Soup')]),
      'weight': new FormArray([new FormControl('100'), new FormControl('125')]),
      'quantity': new FormArray([new FormControl('60'), new FormControl('20')])
    });
    console.log(this.arr[0]);
  }
}

app.component.html

<div class="container">
  <div class="row">
    <form [formGroup]="signupForm">
      <div class="form-group">
        <table class="table">
          <thead>
            <tr>
              <td>S.no</td>
              <td>NAME</td>
              <td>WEIGHT</td>
              <td>QUANTITY</td>
            </tr>
          </thead>
          <tbody>
            <div *ngFor="let i of arr">
              <tr>
                <td>
                  <div *ngFor="let val of signupForm.controls.i.controls">{{val.value}}</div>
               </td>
              </tr>
            </div>

          </tbody>
        </table>
      </div>
      <button class="btn btn-primary" type="submit">Submit</button>
    </form>
  </div>
</div>

如何获取i值并将其传递到*ngFor="let val of signupForm.controls.i.controls

Answer 1

对于每个formArray，您可以在内部signupForm.get(i).value循环中使用*ngFor循环遍历它。（你仍然需要在代码中使用外部*ngFor）。然后使用{{ val }}而不是{{ val.value }}访问该元素。

基于this进行get编译时，

使用controls帐户优先于直接访问表单的aot。

修改

要根据您的评论获取用户界面，您可能需要将模板重新调整为类似的内容，

<table class="table"> <thead> <tr> <td>S.no</td> <td>NAME</td> <td>WEIGHT</td> <td>QUANTITY</td> </tr> </thead> <tbody> <tr *ngFor = "let i of signupForm.get('id').value; let k = index"> <td>{{ signupForm.get('id').value[k] }}</td> <td>{{ signupForm.get('name').value[k] }}</td> <td>{{ signupForm.get('weight').value[k] }}</td> <td>{{ signupForm.get('quantity').value[k] }}</td> </tr> </tbody> </table>

此处，初始数组let i of signupForm.get('id').value用于了解每个formArray的长度。你可以使用其他方法，如果你知道得到一个数组具有适当长度的元素的数组。

如何在嵌套的ngFor中获取数组值？

1 个答案: