Create dynamic reactive form using json file - Angular

Question

I'm tried to create dynamic reactive form using json file but didn't worked with me.

This the json file :

 "inputs":[
    {
      "formcontrol":"email",
      "validation":["required,email"]
    },
    {
      "formcontrol":"password",
      "validation":["required"]
    },
    {
      "formcontrol":"firstname",
      "validation":["required"]
    },
    {
      "formcontrol":"lastname",
      "validation":["required"]
    }
  ]

This what I tried :

for(let input of inputs ) // json data
{
   this.t.push(this.formBuilder.group({
      input.formcontrol: ['', input.validation],
   }));
}

I know what I did isn't correct but I have no clue how to solve this.

Pardeep Jain · Accepted Answer · 2019-11-07 18:35:48Z

3

You need to add only formControl dynamically as per the formGroup like below -

inputs =[
    {
      "formcontrol":"email",
      "validation":["required,email"]
    },
    ....
  ];

  constructor(private fb: FormBuilder) { }

  ngOnInit(){
    this.SignupForm = this.fb.group({});
    let control = new FormControl('');

    for(let input of this.inputs) {
      this.SignupForm.addControl(input.formcontrol, control);
    } 

    console.log(this.SignupForm.value);
  }

Working Example Snippet

If needed you may refer official Documentation here

edited Nov 7, 2019 at 18:35

answered Nov 7, 2019 at 18:29

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tanzeel Over a year ago

Can you please answer this: stackoverflow.com/questions/74735567/…

Roman Šimík · Accepted Answer · 2019-11-07 21:29:16Z

0

Here's example of creating dynamic form controls

inputs: any = <json data>;
formGroup: FormGroup = new FormGroup({});

ngOnInit(): void {
    // process json data
    this.inputs.forEach(value => {
        this.formGroup.addControl(
            value.formcontrol, // control name
            new FormControl("", this.getValidators(value.validation))
        );
    });
}

// method that returns angular validators from strings
private getValidators(validatorsList: Array<string>): Array<ValidatorFn> {
    const validators: Array<ValidatorFn> = [];

    // map string validators to angular validators
    validatorsList.forEach((validator: string) => {
        switch (validator) {
           case "required":
               validators.push(Validators.required);
               break;
           case "email":
               validators.push(Validators.email);
               break;
           default:
           break;
        }
    });

    return validators;
}

I also created StackBlitz example, check console to see result.

edited Nov 7, 2019 at 21:29

answered Nov 7, 2019 at 18:40

Roman Šimík

91110 silver badges25 bronze badges

2 Comments

Pardeep Jain Over a year ago

Link only answers are never encouraged!

Roman Šimík Over a year ago

Sorry, fixed for now :)

Collectives™ on Stack Overflow

Create dynamic reactive form using json file - Angular

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related