为什么在向我的嵌套表单添加 Formarray 时得到一个数组

Question

我正在尝试开发一种与 angular2 教程非常相似的反应形式。它工作正常，但是当我想添加新问题时，出现以下错误：

EXCEPTION: Error in ./RecommendationDetailsComponent class RecommendationDetailsComponent - inline template:45:40 caused by: Cannot find control with path: 'questions -> 1 -> id'

删除问题没问题。有没有人知道我可以在哪里找到解决方案。我不清楚这里到底是什么问题。

型号：

export class Recommendation {
  _id?: string;
  recommendation: string;
  questions: Question[];
  }
}

export class Question {
  id: '';
  question: '';
  date: '';
}

推荐-details.component.ts

import { Component, Input, OnChanges } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';

import { Recommendation, Question } from '../recommendation';
import { RecommendationService } from '../recommendation.service';

@Component({
  selector: 'recommendation-details',
  templateUrl: './recommendation-details.component.html',
  styleUrls: ['./recommendation-details.component.css'],
  providers: [RecommendationService]
})

export class RecommendationDetailsComponent implements OnChanges {
  @Input()
  Recommendation: Recommendation;

  @Input()
  createHandler: Function;
  @Input()
  updateHandler: Function;
  @Input()
  deleteHandler: Function;

  recommendationForm: FormGroup;

  constructor (private fb: FormBuilder, private recommendationService: RecommendationService) {this.createForm()}

  // creatForm Creert een basisformulier om gegevens te wijzigen
  createForm() {
    this.recommendationForm = this.fb.group({
      recommendation: '',
      topic: '',
      secTopic: '',
      questions: this.fb.array([]),
    })
    console.log('Form created')
  }

  // Elke keer dat een andere Recommendation wordt gekozen, verander dan de waarden van het formulier
  ngOnChanges() {
    if (this.Recommendation == null) {
      console.log('waiting...');
    } else {
      this.recommendationForm.reset ({
        recommendation: this.Recommendation.recommendation
      })
      this.setQuestions(this.Recommendation.questions);
    }
  };

  get questions(): FormArray {
    return this.recommendationForm.get('questions') as FormArray;
      console.log(this.questions);
  }

  setQuestions(questions: Question[]) {
    console.log ('Hallo ' + questions[0].question);
    const questionFGs = questions.map(question => this.fb.group(question));
    const questionFormArray = this.fb.array(questionFGs);
    this.recommendationForm.setControl('questions', questionFormArray);
  }

  addQuestion () {
    console.log(this.questions);
    this.questions.push(this.fb.group(new Question()));
  }

  }
}

HTML

<form [formGroup]="recommendationForm" novalidate>
  <div class="form-group">
    <label class="center-block">Recommendation:
      <input class="form-control" formControlName="recommendation">
    </label>
  </div>

<div formArrayName="questions" class="well well-lg">
    <div *ngFor="let question of questions.controls; let i=index" [formGroupName]="i" >
      <!-- The repeated address template -->
      <h4>Question{{i + 1}}</h4>
      <div style="margin-left: 1em;">
        <div class="form-group">
          <label class="center-block">ID:
            <input class="form-control" formControlName="id">
          </label>
        </div>
        <div class="form-group">
          <label class="center-block">Question:
            <input class="form-control" formControlName="question">
          </label>
        </div>
        <div class="form-group">
          <label class="center-block">Date:
            <input class="form-control" formControlName="date">
          </label>
        </div>      
      </div>
    <button (click)="removeQuestion(i)" type="button">Remove</button>
    </div>
  <button (click)="addQuestion()" type="button">Add</button>
</div>
</form>
<p>recommendationForm value: {{ recommendationForm.value | json}}</p>

Answer 1

仔细看代码：

export class Question {
  id: '';
  question: '';
  date: '';
}

Test

如果您调用 new Question()，此 class 上没有任何属性。 Angular 对您传递给 fb.group 方法的值执行 Object.keys

_reduceControls(controlsConfig: {[k: string]: any}): {[key: string]: AbstractControl} {
  const controls: {[key: string]: AbstractControl} = {};
  Object.keys(controlsConfig).forEach(controlName => {
    controls[controlName] = this._createControl(controlsConfig[controlName]);
  });
  return controls;
}

在你的情况下 Object.keys(new Question()) 将是 []

所以替换为：

export class Question {
  id = '';
  question = '';
  date = '';
}

Plunker Example

为什么在向我的嵌套表单添加 Formarray 时得到一个数组

why do I get an array when adding a Formarray to my nested form

angular

angular-reactive-forms