具有材料設計的角度6動態表格生成器

Question

有人可以幫我用從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

Answer 1

您的問題是您創建了一種用於加載字段的方法，但是沒有調用它，因此未加載表單。 為此，您需要這樣做：在app.component.ts上，您需要

implements OnInit

並且您需要在

ngOnInit(){
   this.loadvalues()
}

這樣，當組件加載時，角形將填充您的表單！ 如果您希望通過按鈕執行此操作，請執行以下操作：例如，在app.component.ts上獲取一個布爾變量，則可以使此變量visible: boolean = false; 然后loadvalues(){ this.visible = true; } 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"
    }
  ];

我希望這有幫助！

Answer 2

這是舊文章，但可能會幫助使用json處理動態表單的人這可能會幫助https://github.com/saqibumar/angular-6-dynamic-form-using-material/ ！