具有嵌套条件的JSON数据的角度动态表单视图 [英] Angular dynamic form view from JSON data with nested condition
问题描述
我正在尝试使用Json数据制作动态表单，并且应该从JSON数据的选项类型选择中选择条件. JSON数据结构如下.例如，在这种情况下，从下拉列表的子内容"label":"Subfield1"中选择第一个元素A Speditions GmbH之后，另一个下拉选项应出现在表单上.
I am trying to make dynamic forms with Json data and the conditions should be selected from the options type selection from the JSON data. The JSON data structure are as follow. In this case for example, after selecting the the first element A Speditions GmbH from drop down the child content of this elements "label": "Subfield1", and another drop down options should be appear on the form.
我的打字稿(已更新)
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef } from '@angular/material';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
form:FormGroup;
formTemplate:any = form_template;
stepCfg = {
stepType: 'rahmendaten',
stepHeading: '',
stepIndex: 0,
steps: [],
firstStep: false,
lastStep: false,
onlyStep: false,
data: {},
htmlContent: ''
};
formDataObj = {};
ngOnInit() {
for (const prop of Object.keys(this.stepCfg.data)) {
this.formDataObj[prop] = new FormControl(this.stepCfg.data[prop].value);
this.formTemplate.push({
key: prop,
label: this.stepCfg.data[prop].label,
type: this.stepCfg.data[prop].type,
options: this.stepCfg.data[prop].options
});
}
this.form = new FormGroup(this.formDataObj);
}
}
const form_template = [{
"type": "select",
"label": "Spedition",
"options": [
{
"value": "sped1",
"label": "A Speditions GmbH",
"subfield": {
"type": "select",
"label": "Subfield1",
"options": [
{
"value": "subfieldvalue1",
"label": "101"
},
]
}
},
{
"value": "sped2",
"label": "Alf Scon GmbH"
},
{
"value": "sped3",
"label": "Barthtest"
},
]
}]
export default form_template
//HTml
<mat-card class="rahmendaten-container">
<h3 class="page__header">{{stepCfg.stepHeading}}</h3>
<div *ngIf="!!stepCfg.htmlContent" [innerHTML]="stepCfg.htmlContent">
</div>
<form [formGroup]="form" autocomplete="off" (ngSubmit)="onSubmit()">
<mat-card-content class="page">
<div class="page__container">
<div *ngFor="let prop of formTemplate" class="container__row">
<div [ngSwitch]="prop.type">
<div *ngSwitchCase="'select'">
<span [innerHTML]="prop.label" class="container__row__label">
</span>
<mat-form-field>
<mat-select>
<mat-option *ngFor="let option of prop.options"
[value]="option.value">{{option.label}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</div>
</mat-card-content>
</form>
</mat-card>
推荐答案
由于代码中没有太多内容.您需要做更多的工作.我只会为您提供建议.
Since you don't have much in your code. You need to do more work. I will just give you recommendations on what to do.
检查反应形式或模板驱动形式.我建议使用反应形式.
check reactive forms or template driven forms. I recommend reactive forms.
实际上，您可以将表格转换为反应形式.
than actually you can transfer your form to reactive forms.
form_template = [{
"type": "select",
"label": "Spedition",
"options": [
{
"value": "sped1",
"label": "Adrian Speditions GmbH",
"subfield": {
"type": "select",
"label": "Subfield1",
"options": [
{
"value": "subfieldvalue1",
"label": "101"
},
]
}
},
{
"value": "sped2",
"label": "Alfred Schuon GmbH"
}
]
}]
反应形式如下:
reactiveForm: FormGroup;
this.reactiveForm = new FormGroup({
type: new FormControl('select'),
label: new FormControl('Spedition'),
options: new FormArray([
new FormGroup({
value: new FormControl('sped1'),
label: new FormControl('Adrian Speditions GmbH'),
subfield: new FormGroup({
type: new FormControl('select'),
label: new FormControl('Subfield1'),
options: new FormArray([
new FormGroup({
value: new FormControl('subfieldvalue1'),
label: new FormControl('101')
})
])
})
})
])
});
您可以像这样访问和更改TS中的值.
you access and change values in TS like this.
this.reactiveForm.get('options').at(indexOfArray).get('value').setValue('Your New Value');
因为您要使用选择.这是使用反应形式的有角材料网页的示例. 检查: https://material.angular.io/components/select/examples 这也是我的动态表格问题，可能也有帮助.
since you want to a use select. here is example from angular material webpage using reactive forms. Check: https://material.angular.io/components/select/examples also here is my dynamic forms qustion it also might help.
<h4>mat select</h4>
<mat-form-field>
<mat-label>Favorite animal</mat-label>
<mat-select [formControl]="animalControl" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let animal of animals" [value]="animal">
{{animal.name}}
</mat-option>
</mat-select>
<mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
<mat-hint>{{animalControl.value?.sound}}</mat-hint>
</mat-form-field>
要将select绑定到表单，您需要指定要在html中绑定的formArray，formgroup和formControl.
to bind select to form you need to specify which formArray, formgroup and formControl you are binding in html.
在这种情况下，formControl是animalControl.但对您而言，可能会按标签或类型.但您还需要指定它们所在的formGroup或FormArray.
In this case formControl is animalControl. but for you it will probably by labe or type. but you also need to specify which formGroup or FormArray they are in.
.您可以使用* ngIf检查formvalue是否为空.如果不是，则可以显示下一步.这就是我所能帮助的.
after setting all forms up. you can us *ngIf to check if formvalue is empty. If not you can show you next select. this Is all I can help.
嵌套的自定义FormArray组件没有用FormArrayName绑定子表单
您还可以使用formbuilder并添加验证器.您现在只需要对反应形式进行更多的研究.
you can also use formbuilder and add validators. you just need to do more reasearch on reactive forms for now.
祝你好运！
这篇关于具有嵌套条件的JSON数据的角度动态表单视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
