json - 基于 json 文件创建动态表单(第一次创建表单后,可以通过按钮单击更改 json 文件)
问题描述
我正在尝试基于https://angular.io/guide/dynamic-form创建一个动态表单。我正在使用 json 文件来创建动态表单。我有 2 个 json 文件(sbb.json,gx.json)。当我第一次从 json 文件中读取并创建表单时,它工作得很好。但是我有一个按钮(Sbb),它将文件从 gx.json 更改为 sbb.json 。但是当我点击它时,它给了我以下错误。
错误类型错误:“this.form.controls[this.question.key] 未定义
但是当我单击“Gx”按钮时,它会正确创建表单而不会出现错误。
代码:
app.component.ts:
import { Component } from '@angular/core';
import SbbData from './sbb.json';
import GxData from './gx.json';
@Component({
selector: 'app-root',
template: `
<div>
<button type="button" (click)="callSbb()">SBB</button>
<button type="button" (click)="callGx()">GX</button>
<app-dynamic-form [questions]="questions"></app-dynamic-form>
</div>
`,
providers: []
})
export class AppComponent{
questions: any[];
constructor() {
this.questions = GxData;
}
callGx() {
this.questions = GxData;
}
callSbb() {
this.questions = SbbData;
}
}
动态表单组件:
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { QuestionControlService } from '../question-control.service';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {
@Input() questions: any[] = [];
form: FormGroup;
payLoad = '';
constructor(private qcs: QuestionControlService) { }
ngOnInit() {
this.form = this.qcs.toFormGroup(this.questions);
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
}
}
动态表单组件.html:
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<app-question [question]="question" [form]="form"></app-question>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form>
问题控制服务:
import { Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Injectable()
export class QuestionControlService {
constructor() { }
toFormGroup(questions: any[]) {
let group: any = {};
questions.forEach(question => {
group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
: new FormControl(question.value || '');
});
return new FormGroup(group);
}
}
动态表单问题组件:
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-question',
templateUrl: './dynamic-form-question.component.html'
})
export class DynamicFormQuestionComponent {
@Input() question: any;
@Input() form: FormGroup;
get isValid() { return this.form.controls[this.question.key].valid; }
}
动态表单问题component.html:
<div [formGroup]="form">
<div [ngSwitch]="question.controlType" class="checkbox_wrapper">
<input *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" name="question.name">
<label [attr.for]="question.key">{{question.label}}</label>
<div *ngIf="question.child =='dropdown'" [formGroupName]="question.key">
<select [id]="question.key2" >
<option *ngFor="let opt of question.options" [attr.value]="opt.key" [attr.selected]="opt.select">{{opt.value}}</option>
</select>
</div>
<select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key" >
<option *ngFor="let opt of question.options" [attr.value]="opt.key" [attr.selected]="opt.select">{{opt.value}}</option>
</select>
<!-- <label [attr.for]="question.key">{{question.label}}</label> -->
</div>
<div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
</div>
解决方案
为了解决这个问题,我在动态表单组件中添加了 ngOnChanges() 方法。
import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { QuestionControlService } from '../question-control.service';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {
@Input() questions: any[] = [];
form: FormGroup;
payLoad = '';
//newly added function
ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
let change = changes[propName];
// let curVal = JSON.stringify(change.currentValue);
// let prevVal = JSON.stringify(change.previousValue);
if (propName === 'questions') {
this.form = this.qcs.toFormGroup(this.questions);
}
}
}
constructor(private qcs: QuestionControlService) { }
ngOnInit() {
this.form = this.qcs.toFormGroup(this.questions);
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
console.log(JSON.parse(this.payLoad));
}
}
推荐阅读
- python - 按组计数并在熊猫中重置为 1
- jira - JIRA - 有没有办法在“问题”视图中添加“史诗”作为列?
- dataframe - Power BI 数据建模问题:跨两个表交叉筛选的架构问题
- c# - 从列表类访问属性
- python - 为什么python在索引单个值时只返回indexError?
- r - 有没有办法自动防止 geom_text 标签被切断?
- c# - 如何在 C# & Unity 中扩展使用二次插值创建的曲线?
- asp.net-core - Asp.net core 5 Odata 错误( services.AddOData; 不工作)
- centos7 - 如何安装 mellanox 驱动程序?
- python - 如何解决 conda 问题:PackagesNotFoundError: 当前频道无法提供以下软件包