0
我可以使用一些帮助创建一个流星Angular2形式与2级嵌套对象数组。 Im新Angular 2,我不知道如何处理这个。流星Angular 2 FormBuilder两个嵌套的数组对象
到目前为止我的代码:
games.model.ts
import { CollectionObject } from './collection-object.models';
export interface Game extends CollectionObject {
name: string,
createdAt: Date,
questions?: [Questions]
}
interface Questions {
question: string,
type: string,
answers?: [Answers],
solution?: string
}
interface Answers {
answer: string,
correct?: boolean
}
游戏edit.component.ts
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import {AbstractControl, FormArray, FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
import { Games } from '../../../../both/collections/games.collection';
import { Game } from '../../../../both/models/games.model';
import template from './game-edit.component.html';
@Component({
selector: 'game-edit',
template
})
export class GameEditComponent implements OnInit {
gameId: string;
paramsSub: Subscription;
game: Game;
gameForm: FormGroup;
constructor(
private route: ActivatedRoute,
private fb: FormBuilder
){}
ngOnInit() {
this.paramsSub = this.route.params
.map(params => params['gameId'])
.subscribe(gameId => {
this.gameId = gameId
this.game = Games.findOne(this.gameId);
});
this.gameForm = this.fb.group({
questions: this.fb.array(
[this.buildQuestions('')]
),
answers: this.fb.array(
[this.buildAnswers('')]
)
})
}
buildQuestions(val: string) {
return new FormGroup({
question: new FormControl(val),
type: new FormControl(val),
solution: new FormControl(val),
answers: this.fb.array(
[this.buildAnswers('')]
)
})
}
buildAnswers(val: string) {
return new FormGroup({
answer: new FormControl(val),
correct: new FormControl(val)
})
}
}
游戏edit.component.html
<div class="game-edit-container">
<h2>{{game.name}}</h2>
<div class="row">
<div class="game-edit">
<form layout="column" submit="saveGame()" [formGroup]="gameForm">
<h3>Questions</h3>
<fieldset formArrayName="questions">
<div class="form-group" *ngFor="let question of gameForm.get('questions').controls; let i=index"
[formGroup]='question'>
<div class="col-sm-6">
<label [attr.for]="'question'+i">Question</label>
<input type="text" class="form-control" [attr.id]="'question'+i" formControlName="question">
</div>
<div class="col-sm-6">
<label [attr.for]="'type'+i">Type</label>
<select class="form-control" [attr.id]="'type'+i" formControlName="type">
<option value="mulit">Multi</option>
<option value="free">Free</option>
<option value="guess">Guess</option>
<option value="pic">Pic</option>
</select>
</div>
<fieldset formArrayName="answers">
<div class="form-group row" *ngFor="let answer of gameForm.get('answers').controls"; let j="index"
[formGroup]="answer">
<label [attr.for]="'answer'+i+'-'+j">Answer</label>
<input type="text" class="form-control" [attr.id]="'answer'+i+'-'+j" formControlName="answer">
<label [attr.for]="'correct'+i+'-'+j">Correct</label>
<input type="checkbox" class="form-control" [attr.id]="'correct'+i+'-'+j" formControlName="correct">
</div>
</fieldset>
<div class="col-sm-6">
<label [attr.for]="'solution'+i">Solution</label>
<input type="text" class="form-control" [attr.id]="'solution'+i" formControlName="solution">
</div>
</fieldset>
</form>
</div>
</div>
</div>
第一个对象数组是wor国王, 但我有问题要获得“答案”的工作。 ?
modules.js哈希= f3fb566 ...:56177 EXCEPTION:错误./GameEditComponent 类GameEditComponent - 联模板:0:848引起的:无法 执行上 '元素' 的setAttribute':“; “名称不是有效的属性 。
多数民众赞成即时错误从控制台接收。
我搜索了2级嵌套对象数组,但我找不到工作解决方案。
希望你们能帮助我了:) THX到目前为止