title: Angular dynamic formControlName generate with fromGroup
body: <p>I have created a form which consist of JSON array and according to that, I am generating Validation,formControlName and generating output through formGroup.</p>
  
  <pre><code>this.ELEMENT_DATA_UPDATE = [
    {
          first_name : 'abc',
          last_name : 'xyz',
          phone : 8888888888
    }
  ];
  </code></pre>
  
  <p>Here, I am using Angular material so converted this key value pair to another array consists of </p>
  
  <pre><code>{"key" : "first_name" , "value" : "abc" , "name" : "First name :"}
  </code></pre>
  
  <p>This is when the input JSON array is fixed. But my project consists of data manipulation on a large scale in which input JSON array contents will change many times. There is no problem in generating UI modules, but when I try to apply Validation and forms modules to this dynamically generated contents, whole flow collapse ,</p>
  
  <p>this is my code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var jsonArray : any = [{}];
  
  export class UpdateContactFieldDialog {
  
    matcher = new MyErrorStateMatcher();
  
    updateForm: FormGroup;
  
    formString : string = null;
    ELEMENT_DATA_UPDATE : any[] = [];
    keyArray : any[] = [];
  
    myJobFunctionControl = new FormControl();
      optionsJobFunction: string[] = ['Operations', 'Production', 'Manufacturing'];
  
    myTitleControl = new FormControl();
      optionsTitle: string[] = ['HR', 'Developer', 'Tester', 'MD', 'CEO', 'Director'];
  
  
  
    constructor(private formBuilder: FormBuilder,private dialogRef: MatDialogRef&lt;AddContactFieldDialog&gt; ) { 
  
    }
  
    ngOnInit() {
  
  
      //dumy randomly geneated fields
      this.ELEMENT_DATA_UPDATE = [
        {
              first_name : 'abc',
              last_name : 'xyz',
              job_function : 'Production',
              title : 'Developer',
              email : 'abc@abx.com',
              phone : 7945612304
        }
      ];
  
      for (let obj of this.ELEMENT_DATA_UPDATE) {
  
          console.log("object length:", this.ELEMENT_DATA_UPDATE.length);
          for (let key in obj) {
              this.keyArray.push({'key' : key , 'value' : obj[key] , 'name': (key.charAt(0).toUpperCase() + key.substr(1).toLowerCase()).replace(/_/g, ' ')});
          }
          break;
      }
      console.log(this.keyArray);
      console.log(this.ELEMENT_DATA_UPDATE[0]);
  
  
        for(let formModule of this.keyArray){
         var keyData = formModule.key;
         
          if(this.formString != null &amp;&amp; keyData == 'email' || keyData.includes('mail')){
              this.formString = this.formString +''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',[Validators.required,Validators.email]], ';  
          }
          else
            if(this.formString != null &amp;&amp; keyData == 'phone' || keyData.includes('number')  || keyData.includes('no') || keyData.includes('num')  ){
              this.formString = this.formString +''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',[Validators.required,Validators.minLength(10),Validators.maxLength(10),Validators.pattern("[0-9]*")]], ';  
          }
          else
          if(this.formString == null &amp;&amp; keyData != 'email' &amp;&amp; keyData != 'phone'){
            this.formString = ''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',Validators.required], '; 
          }
          else{
              this.formString = this.formString + ''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',Validators.required], ';  
          }
  
        }
        console.log(this.formString);
  
          jsonArray = (this.formString);
      this.updateForm = this.formBuilder.group(jsonArray);
           
    }
  
    // convenience getter for easy access to form fields
    get f() { return this.updateForm.controls; }
  
    submitContact() {
        this.submitted = true;
  
        // stop here if form is invalid
        if (this.updateForm.valid) {
          // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.updateForm.value))
          console.log(this.updateForm.value);
          this.dialogRef.close();
        }
        else{
          return;      
        }
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My code is generating following code as String </p>
  
  <pre><code>first_name: ['', Validators.required],
  last_name: ['', Validators.required],
  job_function: ['', [Validators.required]],
  title: ['', [Validators.required]],
  email: ['', [Validators.required, Validators.email]],
  phone : ['',[Validators.required, Validators.minLength(10), Validators.maxLength(10),  Validators.pattern('[0-9 ]*')]]
  </code></pre>
  
  <p>I want this to be used inside of formGroup so i can dynamically generate formControls , assign them validation and values.</p>
  
  <pre><code>updateForm = this.formBuilder.group(jsonArray);
  </code></pre>