Dynamic Validations for Form Control in Reactive Forms - Angular 7

Question

I am creating a FormGroup with a set of FormControls with an array of objects like this :

import { Component, OnInit } from '@angular/core'
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class App implements OnInit {
 formData : Array<{type:string , formFieldName:string , required?: boolean } = [
  {
    type : 'text',
    formFieldName:'field1',
    required : true
  },
  {
    type : 'text',
    formFieldName:'field2',
    required : true
  },{
    type : 'text',
    formFieldName:'field3',
  },
 ];
 ngOnInit() {
    const formFields = this.formData.reduce(
      (formObj, fieldMetaData) => Object.assign(formObj, {
        [fieldMetaData.formFieldName]: new FormControl('' , Validators.required )}), {});
     this.form = new FormGroup(formFields);
 }
}

I have to setValidators.required based on the JSON object. Something like this :

[fieldMetaData.formFieldName]: new FormControl('' , fieldMetaData.required ? Validators.required : null )}), {});

How can I achieve that?

Pujan Shah · Accepted Answer · 2019-12-10 12:07:24Z

1

Try with this.

new FormControl('' , fieldMetaData.required ? [Validators.required] : [])

answered Dec 10, 2019 at 12:07

Pujan Shah

84511 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Dynamic Validations for Form Control in Reactive Forms - Angular 7

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related