Получение ошибки: formGroup ожидает экземпляр FormGroup. Пожалуйста, передайте один в

Я пытаюсь использовать reactive forms для динамических значений, добавляемых при нажатии кнопки. Я получаю ошибку ниже:

formGroup ожидает экземпляр FormGroup. Пожалуйста, передайте один в

Вот мой пример: dynamic-reactive-forms

Я новичок в reactive forms. Некоторый код в файле ts:

let numberOfTiles = document.getElementsByClassName("tiledata").length;
    if (this.t.length < numberOfTiles) {
      for (let i = this.t.length; i < numberOfTiles; i++) {
        this.t.push(this.formBuilder.group({
          tabName: ['', Validators.required],
          dashboardName: ['', Validators.required],
          linkTo: ['', Validators.required],
          linkSelected: ['', Validators.required]
        }));
      }
}

get f() { return this.dynamicForm.controls }
  get t() { return this.f.alltabs as FormArray; }

  onSubmit() {
    this.submitted = true;
    if (this.dynamicForm.invalid) {
      return;
    }
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.dynamicForm.value, null, 4));
  }

angular angular-reactive-forms angular-forms angular-formbuilder
person Pathik Vejani    schedule 13.12.2019    source источник
comment
В сообщении отсутствует HTML   -  person Vega    schedule 13.12.2019
comment
@Vega создал stackblitz для справки, stackblitz.com/edit/dynamic-reactive-forms -добавить-zqaqjc   -  person Pathik Vejani    schedule 13.12.2019
comment
@Vega, ты можешь помочь?   -  person Pathik Vejani    schedule 13.12.2019

Ответы (2)


arrow_upward
0
arrow_downward 

<div [formGroup]="alltabs">

Может быть, вы забыли alltabs.

person LiHao    schedule 13.12.2019

arrow_upward
0
arrow_downward

Попробуйте этот работающий StackBlitz

Несколько вещей отсутствовали в вашем коде. Я немного изменил ваш код. Посмотрите на приведенный ниже код.

    <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
            <div formArrayName="alltabs">
        <div *ngFor="let item of t.controls; index as i" [formGroupName]="i">

Ваш allTabs - это FormArray, поэтому в HTML вы должны определить его как formArray. Очевидно, что у массива есть итерации, поэтому вам нужно перебрать их и найти свой formGroupName, который всегда является индексом, потому что каждая группа форм находится в каждом индексе formArray.

person Ali Wahab    schedule 13.12.2019
comment
Я не получаю никаких значений в предупреждении. и все еще некоторые ошибки в консоли. Пожалуйста, проверьте. - person Pathik Vejani; 13.12.2019
comment
в консоли: ERROR Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class). Example: <div [formGroup]="myGroup"> <input formControlName="firstName"> </div> In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); - person Pathik Vejani; 13.12.2019
comment
Оповещение появляется, когда вы ставите type="submit" на кнопку. Да, есть ошибки в функции addNewComponent(). Я не знаю, что происходит в этой функции. Но если вы хотите снова ту же форму, нажмите кнопку. Просто нажмите форму на клик. Должен ли я сделать это в stackblitz? - person Ali Wahab; 13.12.2019
comment
если вы видите, в моем примере я загружаю компонент при нажатии button, поэтому при save он должен предупреждать обо всех введенных значениях. - person Pathik Vejani; 13.12.2019
comment
Да, вы можете сделать в этом. - person Pathik Vejani; 13.12.2019
comment
в addNewComponent я загружаю html из другого компонента - person Pathik Vejani; 13.12.2019
comment
вы получаете? - person Pathik Vejani; 13.12.2019
comment
Не могли бы вы помочь? - person Pathik Vejani; 13.12.2019