[英]angular 6 dynamic form generator with material design
Can anyone help me to create this dynamic form with data loaded from an http call(on demand ) ? 有人可以帮我用从http调用(按需)加载的数据来创建此动态表单吗? the working example of code without on demand data is here https://stackblitz.com/edit/github-gaztsv
没有按需数据的代码的工作示例在这里https://stackblitz.com/edit/github-gaztsv
and i tried myself to load the data on a button click but that is not working, please find it below https://stackblitz.com/edit/github-gaztsv-1azc56?file=src%2Fapp%2Fcomponents%2Fdynamic-form%2Fdynamic-form.component.ts 而且我尝试自己按一下按钮加载数据,但是这不起作用,请在下面找到它https://stackblitz.com/edit/github-gaztsv-1azc56?file=src%2Fapp%2Fcomponents%2Fdynamic-form% 2Fdynamic-form.component.ts
and the document which i referred is this https://medium.com/@mail.bahurudeen/create-a-dynamic-form-with-configurable-fields-and-validations-using-angular-6-994db56834da 我提到的文档是https://medium.com/@mail.bahurudeen/create-a-dynamic-form-with-configurable-fields-and-validations-using-angular-6-994db56834da
Your problem is that you created a method to load your fields, but your not calling it so the form is not being loaded. 您的问题是您创建了一种用于加载字段的方法,但是没有调用它,因此未加载表单。 For that you need to do this: On you app.component.ts you need
为此,您需要这样做:在app.component.ts上,您需要
implements OnInit
and you need to load your method on the 并且您需要在
ngOnInit(){
this.loadvalues()
}
Like this when the component is loaded angular will populate your form! 这样,当组件加载时,角形将填充您的表单! If you want this with a button do like this: get a boolean variable for example on your app.component.ts you can make this:
visible: boolean = false;
如果您希望通过按钮执行此操作,请执行以下操作:例如,在app.component.ts上获取一个布尔变量,则可以使此变量
visible: boolean = false;
and then loadvalues(){ this.visible = true; }
然后
loadvalues(){ this.visible = true; }
loadvalues(){ this.visible = true; }
and in the form this: <dynamic-form [fields]="regConfig" (submit)="submit($event)" *ngIf="visible"> </dynamic-form>
loadvalues(){ this.visible = true; }
,形式为: <dynamic-form [fields]="regConfig" (submit)="submit($event)" *ngIf="visible"> </dynamic-form>
If you whant to show and hide in the same button do like this: 如果您想显示和隐藏在同一按钮中,请执行以下操作:
loadvalues(){
if(this.visible)
{
this.visible = false;
}else{
this.visible = true;
}
}
Also you need to load the fields on the top. 另外,您需要将字段加载到顶部。
regConfig: FieldConfig[] = [
{
type: "input",
label: "Username",
inputType: "text",
name: "name",
validations: [
{
name: "required",
validator: Validators.required,
message: "Name Required"
},
{
name: "pattern",
validator: Validators.pattern("^[a-zA-Z]+$"),
message: "Accept only text"
}
]
},
{
type: "input",
label: "Email Address",
inputType: "email",
name: "email",
validations: [
{
name: "required",
validator: Validators.required,
message: "Email Required"
},
{
name: "pattern",
validator: Validators.pattern(
"^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$"
),
message: "Invalid email"
}
]
},
{
type: "input",
label: "Password",
inputType: "password",
name: "password",
validations: [
{
name: "required",
validator: Validators.required,
message: "Password Required"
}
]
},
{
type: "radiobutton",
label: "Gender",
name: "gender",
options: ["Male", "Female"],
value: "Male"
},
{
type: "date",
label: "DOB",
name: "dob",
validations: [
{
name: "required",
validator: Validators.required,
message: "Date of Birth Required"
}
]
},
{
type: "select",
label: "Country",
name: "country",
value: "UK",
options: ["India", "UAE", "UK", "US"]
},
{
type: "checkbox",
label: "Accept Terms",
name: "term",
value: true
},
{
type: "button",
label: "Save"
}
];
I hope this helps! 我希望这有帮助!
这是旧文章,但可能会帮助使用json处理动态表单的人这可能会帮助https://github.com/saqibumar/angular-6-dynamic-form-using-material/ !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.