1
私はangular2チュートリアルと非常によく似た反応型を開発しようとしています。入れ子になったフォームにFormarrayを追加するときに配列を取得する理由
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>
はどのようなものです:あなたがあなたのケースでは
fb.group
方法に渡された値に 角度実行
Object.keys
Object.keys(new Question())
が[]
になるように置き換えますテンプレートコード? –
@Roman Cそれはどういう意味ですか? – Mihaly