CODEWITHSUNDEEP
angularangular-materialangular6dynamic-formsondemand
Jithin Joy
Jithin Joy

Reputation: 91

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 ) ? the working example of code without on demand data is here 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

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

Upvotes: 0

Views: 1436

Answers (2)

Saqib
Saqib

Reputation: 367

This is an old post but might help someone struggling with dynamic forms using json This might help someone https://github.com/saqibumar/angular-6-dynamic-form-using-material/!

Upvotes: 0

Tiago Neiva
Tiago Neiva

Reputation: 337

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 

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; and then loadvalues(){ this.visible = true; } and in the form this: <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!

Upvotes: 0

Related Questions