Angular FormGroup Не удается прочитать свойство 'get' из неопределенного

Question

Я немного новичок ie в 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>

Проблема заключается в том, что всякий раз, когда я пу sh "Добавить новый кнопка ввода, я получаю «Не удается прочитать свойство« получить »неопределенного» в div и в методе добавления элемента. Я не понимаю, что я делаю неправильно.

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 одновременно на одном input
2. В вашем примере strings не определен, он выдаст ошибку
3. не нужно иметь свойство strings, которое вы можете получить this.orderForm.get('items').value
4. Пожалуйста, убедитесь, что вы импортировали OnInit из @angular/core