How to set formControl value dynamically in formGroup using angular?

Question

BuildCustomFields(formControl, formControlValue): FormGroup {
    return this.fb.group({      
      formControl: new FormControl(formControlValue),
    })
  }

I need to add formControl Value from parameter which I pass in BuildCustomFields() method. How can pass the value of formControl dynamically?

It always takes this text "formControl" as key instead of using value which I am passing to it.

Answer 1

If you want formControl to be your dynamic key, you need to pass reference it within [] otherwise you get the value of it

BuildCustomFields(formControl, formControlValue): FormGroup {
debugger
return this.fb.group({
  
 [formControl]: new FormControl(formControlValue),
})

Here is html code

                          <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12" *ngFor="let customFields of removecustomFieldsArray; let i=index">

                      <div formArrayName="customFieldArray">
                        <div class="mainCheckbox form-group col-sm-7 col-xs-7 col-md-7 col-lg-7" [formGroupName]="i">
                          
                          <div>
                            <label class="labelfontsize control-label cfForm">
                           {{customFields.label}} </label>
                         </div>
                          <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12">
                         
                            <div class="col-sm-9 col-xs-9 col-md-9 col-lg-9" style="padding-left: 0px;">

                              <div class="cfForm" *ngIf = "customFields.value.type == 'Yes/No (check box)'">
                                <p-checkbox binary="false"  label="" formControlName="{{CoulmnName}}"></p-checkbox>
                              </div>
                              
                           
                              <div class="cfForm" *ngIf = "customFields.value.type == 'Single line of text'" >
                                <input class="top form-control" hidden="true" formControlName="{{CoulmnName}}"  id="clientReferenceNumber" type="text" />
                              </div>
                             
                              <div class="cfForm" *ngIf = "customFields.value.type == 'Multiple lines of text'">
                               <textarea id="description" hidden="true" formControlName="{{CoulmnName}}" class="form-control" name="matterDescription" rows="5"></textarea>
                              </div>
                            
                              <div class="cfForm" *ngIf = "customFields.value.type == 'Number (1, 1.0, 100)' || customFields.value.type == 'Currency ($, ¥, €)'">
                               <input class="top form-control" hidden="true" formControlName="{{CoulmnName}}" id="clientReferenceNumber" type="number" />
                              </div>
                             
                              <div class="cfForm" *ngIf = "customFields.value.type == 'Picture'">
                               <input class="top form-control" hidden="true" formControlName="{{CoulmnName}}" id="clientReferenceNumber" type="file" />
                              </div>

                              <div class="cfForm" *ngIf = "customFields.value.type == 'Hyperlink'">
                               <input class="top form-control" hidden="true" formControlName="{{CoulmnName}}" id="clientReferenceNumber" type="ur"  />
                              </div>


                            </div>

                            <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3">

                              <div type="button" style="float: right;" [attr.data]="checkboxRemoves"
                                class="checkboxRemove btn btn-default btn-sm"
                                (click)="removeCustomFields(customFields.value)">
                                <span aria-hidden="true" class="fa fa-times"></span>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                      </div>