- 首页
- 前端开发
- ReactiveForm 用于动态更新的表单条目
ReactiveForm 用于动态更新的表单条目
[英] ReactiveForm for dynamically updated form entries
本文介绍了ReactiveForm 用于动态更新的表单条目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在组件中检查myform的状态以检查是否所有字段都已填写?
HTML:
<div *ngFor="let question of questions"><label>{{question.question}}</label><选择需要的><option selected disabled="disabled">Option</option><option *ngFor="let option of question['options']">{{option}}</option></选择>
来自 API 的问题 JSON:
this.questions = [{问题:'你的年龄是多少?',选项:['20'、'30'、'40']},{问题:'多少数量?',选项:['1','2','3']}]
解决方案
如果使用 ReactiveForm,则需要使用 FormArrayFormArray 可以是 FormControl 或 FormGroup
FormControls 的 FormArray
constructor(private fb:FormBuilder) {}ngOnInit() {//我们创建一个FormControl数组,每个问题一个FormControl让数据:FormControl[]=this.questions.map(q=>new FormControl());this.myform=this.fb.group({问题:新 FormArray(数据)})}//.html<!--我们仅在创建表单时使用 *ngIf 来显示表单--><div *ngIf="myform" [formGroup]="myform"><!--我们迭代到 myForm.get('questions').controls --><!--我们使用变量questions"来显示标签和选项--><div *ngFor="let question of myform.get('questions').controls;let i=index"><label>{{questions[i].question}}</label><选择需要的 [formControl]="问题" ><option value="null" disabled="disabled">Option</option><option *ngFor="let option of questions[i].options">{{option}}</option></选择>
<!--仅供检查-->{{myform?.value |json}}
如果我们使用一个 formGroup 数组,我们会改变一些东西
constructor(private fb:FormBuilder) {}ngOnInit() {//我们创建FormGroup数组让 data2:FormGroup[]=this.questions.map(q=>this.fb.group({选项:空}));this.myform2=this.fb.group({问题:新 FormArray(data2)})}<div *ngIf="myform2" [formGroup]="myform2"><!--看我们对 Angular 说formArrayName"--><div formArrayName="问题"><div *ngFor="let question of myform2.get('questions').controls;let i=index" [formGroupName]="i"> <!--不要忘记 formGroupName--><label>{{questions[i].question}}</label><!--select使用formControlName,我们的数组是FormGroup的数组--><选择需要的formControlName="option" ><option value="null" disabled="disabled">Option</option><option *ngFor="let option of questions[i].options">{{option}}</option></选择>
{{myform2?.value |json}}
声明:@FrontEndDeveloper.一件事是我们用来提出问题的数组问题.(Perhafs 我必须为变量选择其他名称),另一件事是表单的值.myform1={questions:["20","1"]} 的值,myform2={questions:[{option:"20"},{option:"2"}]} 的值.
当我们创建一个 FormControl 数组(或一个 FbGroup 数组)时,我使用了 map,同样我可以做一些类似的事情
let data:FormControl[]=[];data.push(new FormControl());data.push(new FormControl());
或
let data2:FormGroup[]=[];data2.push(this.fb.group({选项:空}));data2.push(this.fb.group({选项:空}));
通常我们有一些数据来初始化表单.(一个带有一些数据的对象)我们从 dbs 中获得
//假设我们有 mydata{name:"A",options=["20","1"]}//我们可以映射这些数据来创建表单让数据:FormControl[]=this.mydata.options.map(q=>new FormControl(q));//或者让 data2:FormGroup[]=this.mydata.options.map(q=>this.fb.group({选项:q}));//假设我们有 mydata{name:"A",options=[{option:"20"},{option:"1"}]}//我们可以映射这些数据来创建表单让数据:FormControl[]=this.mydata.options.map(q=>new FormControl(q.option));//或者让 data2:FormGroup[]=this.mydata.options.map(q=>this.fb.group({选项:q.option}));
How to check status of myform in component to check if all the fields are filled or not?
HTML:
<div [formGroup]="myform">
<div *ngFor="let question of questions">
<label>{{question.question}}</label>
<select required >
<option selected disabled="disabled">Option</option>
<option *ngFor="let option of question['options']">{{option}}</option>
</select>
</div>
</div>
</div>
Question JSON coming from API:
this.questions = [
{
question: 'What is your age?',
options: ['20', '30', '40']
},
{
question: 'How much quantity?',
options: ['1','2','3']
}]
解决方案
If you use ReactiveForm, you need use a FormArray
A FormArray can be of FormControl or a FormGroup
FormArray of FormControls
constructor(private fb:FormBuilder) {}
ngOnInit() {
//We create an array of FormControl, each question a FormControl
let data:FormControl[]=this.questions.map(q=>new FormControl());
this.myform=this.fb.group({
questions:new FormArray(data)
})
}
//the .html
<!--we use *ngIf to show the form only when we create the form-->
<div *ngIf="myform" [formGroup]="myform">
<!--we iterate to myForm.get('questions').controls -->
<!--we use our variable "questions" to show the label and options-->
<div *ngFor="let question of myform.get('questions').controls;let i=index">
<label>{{questions[i].question}}</label>
<select required [formControl]="question" >
<option value="null" disabled="disabled">Option</option>
<option *ngFor="let option of questions[i].options">{{option}}</option>
</select>
</div>
</div>
<!--just for check-->
{{myform?.value |json}}
If we use an array of formGroup we change some things
constructor(private fb:FormBuilder) {}
ngOnInit() {
//we create and array of FormGroup
let data2:FormGroup[]=this.questions.map(q=>this.fb.group({
option:null
}));
this.myform2=this.fb.group({
questions:new FormArray(data2)
})
}
<div *ngIf="myform2" [formGroup]="myform2">
<!--see that we say to Angular the "formArrayName" -->
<div formArrayName="questions">
<div *ngFor="let question of myform2.get('questions').controls;
let i=index" [formGroupName]="i"> <!--don't forget formGroupName-->
<label>{{questions[i].question}}</label>
<!--the select use formControlName, our array is an array of FormGroup-->
<select required formControlName="option" >
<option value="null" disabled="disabled">Option</option>
<option *ngFor="let option of questions[i].options">{{option}}</option>
</select>
</div>
</div>
</div>
{{myform2?.value |json}}
Aclaration:@FrontEndDeveloper. One thing is the array question that we use to make the questions.(Perhafs I must be choose other names to the variables), other thing is the value of the form. The value of myform1={questions:["20","1"]}, the value of myform2={questions:[{option:"20"},{option:"2"}]}.
When we create an array of FormControl (or an array of FbGroup) I used map, equally I can do some like
let data:FormControl[]=[];
data.push(new FormControl());
data.push(new FormControl());
or
let data2:FormGroup[]=[];
data2.push(this.fb.group({
option:null
}));
data2.push(this.fb.group({
option:null
}));
Generally we have some data to initialize the form. (an object with some data) that we get from a dbs
//Imagine we have mydata{name:"A",options=["20","1"]}
//we can map this data to create the form
let data:FormControl[]=this.mydata.options.map(q=>new FormControl(q));
//or
let data2:FormGroup[]=this.mydata.options.map(q=>this.fb.group({
option:q
}));
//Imagine we have mydata{name:"A",options=[{option:"20"},{option:"1"}]}
//we can map this data to create the form
let data:FormControl[]=this.mydata.options.map(q=>new FormControl(q.option));
//or
let data2:FormGroup[]=this.mydata.options.map(q=>this.fb.group({
option:q.option
}));
这篇关于ReactiveForm 用于动态更新的表单条目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文