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>

问题是，每当我按下“添加新输入”按钮时，都会在div和添加项方法中得到“无法读取未定义的属性'get'”。我不明白我在做什么错。

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>

in .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. 请确保您已从OnInit导入@angular/core