使用 angular 从 JSON 加载动态表单 6
Loading dynamic form from JSON using angular 6
我正在使用 link、https://angular.io/guide/dynamic-form
创建 angular 6 个动态表单
这里我在question.service.ts,
中给出了以下内容
getQuestions() {
let questions: DynamicBase<any>[] = [
new TextboxQuestion({
key: 'firstName',
label: 'First name',
type: 'text',
value: '',
required: true,
order: 1
}),
new TextboxQuestion({
key: 'emailAddress',
label: 'Email',
type: 'email',
order: 2
}),
new DropdownQuestion({
key: 'brave',
label: 'Bravery Rating',
options: [
{key: 'solid', value: 'Solid'},
{key: 'great', value: 'Great'},
{key: 'good', value: 'Good'},
{key: 'unproven', value: 'Unproven'}
],
order: 4
}),
];
return questions.sort((a, b) => a.order - b.order);
}
在这里而不是
new TextboxQuestion({
key: 'firstName',
label: 'First name',
type: 'text',
value: '',
required: true,
order: 1
}),
我想从 JSON,
加载数据
"dynamicJSON": [
{
"key": "role_name",
"label": "Role Name",
"type": "text",
"value": "",
"required": true,
"order": 1
},
{
"key": "last_ame",
"label": "Last Name",
"type": "text",
"value": "",
"required": true,
"order": 2
}
]
为此我使用了以下内容,
let newArray = dynamicJSON;
let questions: DynamicBase<any>[] = [
newArray.forEach(element => {
new TextboxQuestion(element)
});
];
return questions.sort((a, b) => a.order - b.order);
其中元素在控制台中给出的值为
{key: "role_name", label: "Role Name", type: "text", value: "", required: true, …}
但是我得到的错误是 key of undefined.. 当我控制台 questions 也显示为 [未定义]..
如何在文本框等表单对象中传递动态 json 值?
请帮助我摆脱它,卡了很久..
您没有在问题数组中推送 TextboxQustion 对象。我已经在 stackblitz 上创建了示例,请检查。
这是ts代码。
let newArray = this.dynamicJSON;
let questions: any = [ ]
newArray.forEach(element => {
questions.push(element)
});
questions.sort((a, b) => a.order - b.order);
我创建了一个示例应用程序,它根据您的动态 json 生成带有验证的表单。请参考 stackblitz 示例:reactive form dynamic validation
我已经实现了生成动态表单的最短(更少代码)方法。
这是组件代码:
ngOnInit(){
this.sortDynamicJson();
this.questionFormGroup = this.formBuilder.group({
questions:this.formBuilder.array([])
})
this.generateForm()
}
generateForm(){
this.dynamicJSON.forEach(t=>{
let questions =<FormArray> this.questionFormGroup.controls["questions"];
questions.push(this.formBuilder.group({
value:[t.value,[t.required ? Validators.required:null]]
}))
})
}
如您所见,上面的代码,我生成了值为属性的FormGroup,因为其他属性与表单无关。
现在我在 HTML 中应用了动态 JSON 数组对象的循环并绑定了表单。
这是 HTML 代码:
<form >
<div [formGroup]="questionFormGroup.controls.questions.controls[i]" *ngFor="let row of dynamicJSON; let i = index;">
<div class="form-group">
<label>{{row.label}}</label>
<input type="text" formControlName="value" class="form-control" />
</div>
</div>
<<button [disabled]="!questionFormGroup.valid" class="btn btn-primary">Submit</button>
如有任何问题,请告诉我。
我正在使用 link、https://angular.io/guide/dynamic-form
创建 angular 6 个动态表单这里我在question.service.ts,
中给出了以下内容 getQuestions() {
let questions: DynamicBase<any>[] = [
new TextboxQuestion({
key: 'firstName',
label: 'First name',
type: 'text',
value: '',
required: true,
order: 1
}),
new TextboxQuestion({
key: 'emailAddress',
label: 'Email',
type: 'email',
order: 2
}),
new DropdownQuestion({
key: 'brave',
label: 'Bravery Rating',
options: [
{key: 'solid', value: 'Solid'},
{key: 'great', value: 'Great'},
{key: 'good', value: 'Good'},
{key: 'unproven', value: 'Unproven'}
],
order: 4
}),
];
return questions.sort((a, b) => a.order - b.order);
}
在这里而不是
new TextboxQuestion({
key: 'firstName',
label: 'First name',
type: 'text',
value: '',
required: true,
order: 1
}),
我想从 JSON,
加载数据"dynamicJSON": [
{
"key": "role_name",
"label": "Role Name",
"type": "text",
"value": "",
"required": true,
"order": 1
},
{
"key": "last_ame",
"label": "Last Name",
"type": "text",
"value": "",
"required": true,
"order": 2
}
]
为此我使用了以下内容,
let newArray = dynamicJSON;
let questions: DynamicBase<any>[] = [
newArray.forEach(element => {
new TextboxQuestion(element)
});
];
return questions.sort((a, b) => a.order - b.order);
其中元素在控制台中给出的值为
{key: "role_name", label: "Role Name", type: "text", value: "", required: true, …}
但是我得到的错误是 key of undefined.. 当我控制台 questions 也显示为 [未定义]..
如何在文本框等表单对象中传递动态 json 值? 请帮助我摆脱它,卡了很久..
您没有在问题数组中推送 TextboxQustion 对象。我已经在 stackblitz 上创建了示例,请检查。
这是ts代码。
let newArray = this.dynamicJSON;
let questions: any = [ ]
newArray.forEach(element => {
questions.push(element)
});
questions.sort((a, b) => a.order - b.order);
我创建了一个示例应用程序,它根据您的动态 json 生成带有验证的表单。请参考 stackblitz 示例:reactive form dynamic validation
我已经实现了生成动态表单的最短(更少代码)方法。
这是组件代码:
ngOnInit(){
this.sortDynamicJson();
this.questionFormGroup = this.formBuilder.group({
questions:this.formBuilder.array([])
})
this.generateForm()
}
generateForm(){
this.dynamicJSON.forEach(t=>{
let questions =<FormArray> this.questionFormGroup.controls["questions"];
questions.push(this.formBuilder.group({
value:[t.value,[t.required ? Validators.required:null]]
}))
})
}
如您所见,上面的代码,我生成了值为属性的FormGroup,因为其他属性与表单无关。
现在我在 HTML 中应用了动态 JSON 数组对象的循环并绑定了表单。
这是 HTML 代码:
<form >
<div [formGroup]="questionFormGroup.controls.questions.controls[i]" *ngFor="let row of dynamicJSON; let i = index;">
<div class="form-group">
<label>{{row.label}}</label>
<input type="text" formControlName="value" class="form-control" />
</div>
</div>
<<button [disabled]="!questionFormGroup.valid" class="btn btn-primary">Submit</button>
如有任何问题,请告诉我。