title: How to create a dynamic angular form using reactive form?
body: <p>I need to create a dynamic form using angular react. But this for has many sub form groups and these groups may change by form select box values.</p>
  
  <pre><code>  profileForm = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      department: new FormControl('')
    });
  </code></pre>
  
  <p>Department types are <code>'a', 'b', 'c'</code>. </p>
  
  <p>if user select <code>'a'</code>, I will add a new FormGroup named <code>"departmentSettings"</code> in profileForm</p>
  
  <pre><code>aFormGroup =  new FormGroup({
      xWorkTime: new FormControl(''),
      yWorkTime: new FormControl('')
  })
  
  profileForm = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      department: new FormControl(''),
      departmentSettings: new FormGroup({
          xWorkTime: new FormControl(''),
          yWorkTime: new FormControl('')
      })
  });
  </code></pre>
  
  <p>if user select <code>'b'</code>, I will add a new <code>FormGroup</code> in profileForm</p>
  
  <pre><code>bFormGroup =  new FormGroup({
      someProperty: new FormControl(''),
      otherProperty: new FormControl('')
  })
  
  profileForm = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      department: new FormControl(''),
      departmentSettings:  new FormGroup({
          someProperty: new FormControl(''),
          otherProperty: new FormControl('')
      })
  }); 
  </code></pre>
  
  <p>The other cases are like this. So how can I do this using simple way in angular?</p>