Question

我有一个如下所示的角度模板。

<section class="section">
      <div class="container">
        <form [formGroup]="testForm">
          <div class="columns is-multiline">
            <div class="column is-2">
              <div class="box">
                <h1 class="subtitle">Test Array</h1>
                <div formArrayName="salestest" *ngFor="let sale of salestest.controls; let i=index">
                  <div [formGroupName]="i">
                    <div class="field">
                      <label class="label">Test Sale1</label>
                      <div class="control">
                        <input class="input" type="text" placeholder="Sales" formControlName="sales">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section>

我有一个这样的组件

export class SalesTestComponent implements OnInit {
  testForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.testForm = this.fb.group({
      salestest: this.fb.array([this.buildSalesTest()])
    });
    console.log("ngOnint was called");
  }

  buildSalesTest(): FormGroup {
    return this.fb.group({
      sales: ""
    });
  }

   get salestest(): FormArray {
    return <FormArray>this.testForm.get("salestest");
  }
}

在我构建并运行此程序时，出现错误提示

错误TypeError：无法读取未定义的属性“值”

模板中的第3行是

<form [formGroup]="testForm">

我不确定为什么angular抱怨无法读取undefined属性。

这是整个错误消息

ERROR TypeError: Cannot read property 'value' of undefined
    at Object.eval [as updateRenderer] (CreateSalesTestComponent.html:23)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:23838)
    at checkAndUpdateView (core.js:23213)
    at callViewAction (core.js:23449)
    at execComponentViewsAction (core.js:23391)
    at checkAndUpdateView (core.js:23214)
    at callViewAction (core.js:23449)
    at execEmbeddedViewsAction (core.js:23412)
    at checkAndUpdateView (core.js:23209)
    at callViewAction (core.js:23449)

第23行是

ngOnInit() {
    this.testForm = this.fb.group({
      salestest: this.fb.array([this.buildSalesTest()])
    }); <!-- **Line 23** -->
    console.log("ngOnint was called");
  }

Answer 1

以下一行是错误的。

<div [formGroupName]="i">

将其更改为

<div [formGroup]="sale">

您正在将索引分配给formGroupName。这就是为什么您的form属性无法在其中找到组及其控件的原因。这是Working Example

如果有问题，请通知我。

Angular抱怨无法读取未定义的属性

1 个答案: