具有材料设计的 Angular 6 动态形状生成器答案

【问题标题】：angular 6 dynamic form generator with material design具有材料设计的 Angular 6 动态形状生成器
【发布时间】：2018-09-10 14:33:28
【问题描述】：

谁能帮我用从 http 调用（按需）加载的数据创建这个动态表单？没有按需数据的代码的工作示例在这里 https://stackblitz.com/edit/github-gaztsv

我尝试自己在单击按钮时加载数据，但这不起作用，请在下面找到 https://stackblitz.com/edit/github-gaztsv-1azc56?file=src%2Fapp%2Fcomponents%2Fdynamic-form%2Fdynamic-form.component.ts

我提到的文件是这个 https://medium.com/@mail.bahurudeen/create-a-dynamic-form-with-configurable-fields-and-validations-using-angular-6-994db56834da

【问题讨论】：

标签： angular angular-material angular6 dynamic-forms ondemand

【解决方案1】：

您的问题是您创建了一个加载字段的方法，但您没有调用它，因此没有加载表单。为此，您需要这样做：在你的 app.component.ts 上你需要

implements OnInit

你需要在

上加载你的方法

ngOnInit(){
   this.loadvalues()
}

像这样，当组件加载时，角度会填充您的表单！如果你想用一个按钮这样做：例如，在您的 app.component.ts 上获取一个布尔变量，您可以这样做：visible: boolean = false; 然后loadvalues(){ this.visible = true; } 形式如下：<dynamic-form [fields]="regConfig" (submit)="submit($event)" *ngIf="visible"> </dynamic-form>

如果您想在同一个按钮中显示和隐藏，请执行以下操作：

loadvalues(){
    if(this.visible)
    {
      this.visible = false;
    }else{
     this.visible = true;

    }
}

您还需要加载顶部的字段。

 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"
    }
  ];

我希望这会有所帮助！

【讨论】：

我在按钮单击时从 html 调用它，这就是我想要加载值的方式，而不是在 ngOnInit() 上，请检查 app.component.html
你可以在 app.component.ts 上获取一个布尔变量，例如：visible: boolean = false;，然后是 loadvalues(){ this.visible = true; }，格式如下：<dynamic-form [fields]="regConfig" (submit)="submit($event)" *ngIf="visible"> </dynamic-form>
试过还是同样的错误，用ngchange解决了，谢谢你的帮助

【解决方案2】：

这是一篇旧帖子，但可能有助于使用 json 处理动态表单的人这可能会帮助某人 https://github.com/saqibumar/angular-6-dynamic-form-using-material/!

【讨论】：