[英]How to make a dynamic form in angular with an ngfor?
我正在制作一个技能矩阵,该矩阵从数据库中读取问题并将其输出,然后使用单选按钮要求用户输入数字。 我希望能够将这些数据以(CurrentDate,score,skillID,UserID的格式)发送到数据库。
我试图为读取的每个问题建立一个答案模型,以便for循环的每个迭代都将具有自己的答案模型,其中包含所需的数据,因此我可以将所有这些问题推送到数组中,然后发布该数组。 无法使它工作,但我认为那应该怎么做。
TS:
export class QuestionListComponent implements OnInit, OnDestroy{
questions: Question[] = [];
private questionsSub: Subscription;
skillLevel = []
energyLevel = []
answerModels = []
thisIsMyForm: FormGroup
answerModel = new Answer(null,1,1,1);
@Input() Capability: string;
constructor(public questionsService: QuestionService, private formBuilder: FormBuilder){
let myDate = new Date();
this.answerModel = new Answer(myDate,1,1,1);
this.thisIsMyForm = new FormGroup({
formArrayName: this.formBuilder.array([])
})
this.buildForm()
}
buildForm(){
const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;
Object.keys(this.questions).forEach((i) => {
controlArray.push(
this.formBuilder.group({
SkillID: new FormControl({value: this.questions[i].SkillID, disabled: true}),
score: new FormControl({value: this.questions[i].score, disabled: true}),
date: new FormControl({value: this.questions[i].date, disabled: true}),
})
)
})
console.log(controlArray)
}
ngOnInit(){
this.questionsService.getQuestions().subscribe(
data => {
this.questions = [];
Object.keys(data).map((key)=>{ this.questions.push(data[key])});
console.log(this.questions);
});
}
ngOnDestroy() {
this.questionsSub.unsubscribe();
}
}
HTML:
<form id="myForm" [formGroup]="thisIsMyForm">
<div [formArrayName]="'formArrayName'">
<ul *ngFor="let question of questions[0]; let i = index">
<div [formGroupName]="i">
<form #userForm = "ngForm">
<div *ngIf="question.Capability === Capability">
<h3 class="SubCat">{{question.SubCategory}} {{question.Skill}}</h3>
<div class="EandS">
<h4 class="skill">Skill</h4>
<h4 class="energy">Energy</h4>
</div>
<div class = "buttons">
<div class="skillButtons">
<mat-radio-group aria-label="Select your Skill Level" [(ngModel)]="skillLevel[i]" [name]="'completedSkills-' + i" >
<mat-radio-button [value]="0" class="rbuttonSkill">0</mat-radio-button>
<mat-radio-button [value]="1" class="rbuttonSkill">1</mat-radio-button>
<mat-radio-button [value]="2" class="rbuttonSkill">2</mat-radio-button>
<mat-radio-button [value]="3" class="rbuttonSkill">3</mat-radio-button>
<mat-radio-button [value]="4" class="rbuttonSkill">4</mat-radio-button>
</mat-radio-group>
</div>
<div class="energyButtons">
<mat-radio-group aria-label="Select your Energy Level" [(ngModel)]="energyLevel[i]" [name]="'completedEnergy-' + i">
<mat-radio-button [value]="1" class="rbuttonEnergy">1</mat-radio-button>
<mat-radio-button [value]="2" class="rbuttonEnergy">2</mat-radio-button>
<mat-radio-button [value]="3" class="rbuttonEnergy">3</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div class="Selected answer">
<strong>Seleted Answer : {{skillLevel[i]}} {{question.SkillID}} </strong>
<strong>Seleted Answer : {{energyLevel[i]}} {{question.SkillID}}</strong>
<strong>{{answerModel | json}}</strong>
</div>
</div>
</form>
</div>
</ul>
</div>
</form>
<button [disabled]="skillLevel[i]==undefined" mat-raised-button color="accent">save</button>
<pre>{{ skillLevel | json }}</pre>
<pre>{{ energyLevel | json }}</pre>
我想我需要为每个问题获取答案模型。
您在组件的构造函数中调用this.buildForm(),但是直到组件构造函数之后调用NgOnInit时才加载问题-因此,在构建表单时,没有要迭代的问题。
您应该在订阅中调用this.buildForm():
ngOnInit(){
this.questionsService.getQuestions().subscribe(data => {
this.questions = [];
Object.keys(data).map((key)=>{ this.questions.push(data[key])});
console.log(this.questions);
this.buildForm();
});
}
我也不确定他的行在您的html中是否正确:
<ul *ngFor="let question of questions[0]; let i = index">
您只需要执行以下操作即可迭代所有问题:
<ul *ngFor="let question of questions; let i = index">
编辑我花了一些时间为您设计基本概念证明:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.