[英]Angular dynamic form view from JSON data with nested condition
我正在嘗試使用Json數據制作動態表單,並且應該從JSON數據的選項類型選擇中選擇條件。 JSON數據結構如下。 例如,在這種情況下,從下拉列表的子內容“ label”:“ Subfield1”中選擇第一個元素A Speditions GmbH之后,另一個下拉選項應出現在表單上。
我的打字稿(已更新)
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>
由於您的代碼中沒有太多內容。 您需要做更多的工作。 我只會為您提供建議。
檢查反應形式或模板驅動形式。 我建議使用反應形式。
實際上,您可以將表格轉換為反應形式。
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中的值。
this.reactiveForm.get('options').at(indexOfArray).get('value').setValue('Your New Value');
由於您要使用選擇。 這是使用反應形式的角材網頁的示例。 檢查: https ://material.angular.io/components/select/examples這也是我的動態表單問題,它可能也有幫助。
<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。
在這種情況下,formControl是animalControl。 但對您而言,可能會按標簽或類型。 但您還需要指定它們所在的formGroup或FormArray。
設置完所有表格后。 您可以使用* ngIf檢查formvalue是否為空。 如果不是,則可以顯示下一步。 這就是我所能幫助的。
嵌套的自定義FormArray組件不與具有FormArrayName的子窗體綁定
您還可以使用formbuilder並添加驗證器。 您現在只需要對反應式進行更多的研究。
祝好運!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.