bahurudeen/dynamicform

dynamicform's Issues

dynamic form

dynamic data binding fails for dynamic forms

Everything working while using static data on load but it fails while trying to load the form on run time.

placed one button on page on click i want the forms to load dynamically,

  <button name="loadForm" (click)="loadForm()">loadForm</button>

loadForm(){
this.regConfig = [
    {
      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"
    }
  ];
  }

ERROR
Error: Cannot find control with name: 'name'

Edit Code:
https://stackblitz.com/edit/github-gaztsv?file=src%2Fapp%2Fapp.component.ts

How to detect the click event of check box , radio and button.

I am not able to get the click event or change event of checkbox, radio, and button if the type is not submit.

How to bind values to dynamically create fields in form

This is working awesome for any kind of dynamic form but have small issue how to bind values to fields which we are getting from database by api call

Angular 12

Could it adapt to work with Angular 12?

There is no time picker

there is no time picker along with datepicker

How we can dynamically add or remove control ?

I am not able to add and remove control or bind the attribute dynamically, everything works fine with the static.

For example, I want to add or remove or I want to bind attr like [invert],[max],[min],[step],[vertical]

<mat-slider
        [invert]="invert"
        [max]="max"
        [min]="min"
        [step]="step"
        [vertical]="vertical">
    </mat-slider>

I am looking for something like ngIf* --> to show and hide component based on conditions