Angular FormGroup 无法读取未定义的 属性 'get'

Question

我是 Angular 的新手。我想让页面能够动态添加文本输入。 我使用 FormGroup 来解决这个问题。这是我的代码：

createInputDynamicly.ts

export class CreateInputsDynamicly implements OnInit {
  orderForm: FormGroup;
  items: FormArray;
  strings: string[];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {

    this.orderForm = this.formBuilder.group({
      items: this.formBuilder.array([ this.createItem() ])
    });
    this.strings.push('');
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      newText: ''
    });
  }


  addItem(): void {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
    this.strings.push('');
  }

  showString() {
    console.log(this.strings);
  }
}

createInputDynamicly.html

<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="newText" [(ngModel)]="strings[i]">
  </div>
</div>

<button (click)="addItem()" type="button">Add new input</button>
<button (click)="showStrings()" type="button">Show</button>

问题是每当我按下 "Add new input" 按钮时，我都会在 div 和添加项目方法中得到 "Cannot read property 'get' of undefined"。我不明白我做错了什么。

Answer 1

这是工作示例

在模板中

<form [formGroup]="orderForm">
<div formArrayName="items">
  <div [formGroupName]="i" *ngFor="let item of items.controls; let i = index;">
    <input formControlName="newText" >
  </div>
</div>

<button (click)="addItem()" type="button">Add new input</button>
<button (click)="showStrings()" type="button">Show</button>
</form>

在 .ts 中

export class CreateInputsDynamicly implements OnInit {
  orderForm: FormGroup;
  get items(): FormArray {
    return this.orderForm.get("items") as FormArray;
  }

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.orderForm = this.formBuilder.group({
      items: this.formBuilder.array([ this.createItem() ])
    });

  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      newText: ''
    });
  }


  addItem(): void {
    this.items.push(this.createItem());
  }

  showString() {
    console.log( this.items.value);
  }
}

1. 一次不要在一个输入上使用 formControlName 和 ngModel
2. 在你的例子中 strings 没有定义它会给出错误
3. 不需要strings属性就可以得到this.orderForm.get('items').value
4. 请确保您已从 @angular/core
导入 OnInit