我正在尝试开发一种与angular2教程非常相似的反应形式。它工作正常,但是当我想添加新问题时,我收到以下错误:
EXCEPTION:./RecommendationDetailsComponent类出错 RecommendationDetailsComponent - 内联模板:45:40由以下原因引起: 找不到路径控制:'问题 - > 1 - > ID'
删除问题可以正常工作。有没有人知道我可以在哪里找到解决方案。我不清楚这里究竟是什么问题。
模特:
export class Recommendation {
_id?: string;
recommendation: string;
questions: Question[];
}
}
export class Question {
id: '';
question: '';
date: '';
}
advice-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>
答案 0 :(得分:2)
仔细查看代码:
export class Question {
id: '';
question: '';
date: '';
}
如果您拨打new Question()
,则此课程中没有任何属性。
Angular对传递给Object.keys
方法
fb.group
_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 强>