我正在使用Angular 2 ReactiveForms来创建表单。表格由模板,问题和表格组成。答案。模板包含许多问题,问题包含许多答案。
ngOnInit() {
// initialize template
this.myForm = this.formBuilder.group({
title: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(30)]],
owner: [localStorage.getItem('user')],
questions: this.formBuilder.array([
this.initQuestion()
])
});
}
initQuestion() {
// initialize question
return this.formBuilder.group({
questionText: [{value: '', disabled: true}],
answers: this.formBuilder.array([
this.initAnswer()
])
});
}
initAnswer() {
// initialize answer
return this.formBuilder.group({
answerText: [{value: '', disabled: true}]
});
}
addQuestion() {
const control = <FormArray>this.myForm.controls['questions'];
console.log(control);
control.push(this.initQuestion());
}
addAnswer() {
const control = <FormArray>this.myForm.get(['questions.0.answers']);
control.push(this.initAnswer());
}
我的目标是允许用户向模板添加问题,并回答每个问题。然而,我的问题是我无法访问名为“answers”的嵌套数组。截至目前,我能够添加问题并且工作正常,但是当我尝试添加问题的答案(addAnswer()方法)时,我收到一条错误,上面写着“无法读取属性'推送'的null” ,它在addAnswer()方法中引用control.push。任何帮助表示赞赏!
编辑:忘记添加我的HTML代码:
<table class=pageTable align=center border="1px">
<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)" align=center>
<!-- we will place our fields here -->
<input type="submit" [disabled]="!myForm.valid" value="Submit Template">
<!-- Template Title -->
<div class="form-group">
<label>Template Title:</label><br/>
<input type="text" formControlName="title"><br/>
<!--display error message if name is not valid-->
<small *ngIf="!myForm.controls.title.valid" class="text-danger">
Title must be between 5-30 characters.
</small>
</div>
<br/>
<!-- List of Questions -->
<div formArrayName="questions" align=center>
<div [formGroupName]="i" *ngFor="let question of myForm.controls.questions.controls; let i=index" class="Question-panel">
<div class="Question-panel-title">
<span>Question {{i + 1}}:</span>
<!-- show remove button when more than one address available -->
<span *ngIf="myForm.controls.questions.controls.length > 1"
(click)="removeQuestion(i)">
</span>
<question [group]="myForm.controls.questions.controls[i]"></question>
</div>
<!-- Llist of Answers -->
<div formArrayName="answers" align=center>
<div [formGroupName]="j" *ngFor="let answer of question.controls.answers.controls; let j=index">
<div class="Question-panel-content">
<span>Answer {{j + 1}}:</span>
<br/><a (click)="addAnswer()" style="cursor: default">
Add answer
</a>
</div>
</div>
</div>
</div>
</div>
<br/>
<a (click)="addQuestion()" style="cursor: default">
Add question
</a>
</form>
</table>
答案 0 :(得分:2)
我认为你应该使用字符串
this.myForm.get(['questions', 0, 'answers']);
或类似
的数组addAnswer(idx: number) {
const control = <FormArray>this.myForm.get(['questions', idx, 'answers']);
control.push(this.initAnswer());
}
<强>更新强>
根据您的HTML
<a (click)="addAnswer(i)">Add answer</a>
和html
{{1}}
另见