How to assign dynamic array of objects to formgroup using angular8

Question

Hi i get array of objects from the API hit, that array of objects must be assigned to formGroup. I have tried using formGroup binding, but it detects true/false values but it doesnt give me changed true/false values in the array of objects instead gives me only true/false and also i have date input field as well in the other array, it wont detect the true/false value or the changed value as well. If the code what i have written is wrong, then please do correct me and help me to write in efficient way.

Help appreciated.

DEMO: DEMO

TS:

 private settingsInfoForm() {
    if (!this.agentDetailsList) {
      // Add
      this.agentSettingsInfoForm = this.FB.group({
        agentToogles: this.FB.array(this.detailsToggle.map(x=> x.boolValue)),
        restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
      });
    } else {
      // Edit
      if (this.agentDetailsList) {
       this.detailsToggle = this.agentDetailsList
       this.agentSettingsInfoForm = this.FB.group({
          agentToogles: this.FB.array(this.detailsToggle.map(x=>x.boolValue)),
           restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
      })
      }
      this.agentSettingsInfoForm.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', this.formEdit)
        })
      }
    }

HTML:

<form [formGroup]= "agentSettingsInfoForm">
<div class="row row-cols-2" formGroupName="agentToogles">
              <div class="col" *ngFor="let toggleValue of detailsToggle;let i = index">
                <div class="custom-control custom-switch mb-3">
                    <input type="checkbox" [formControlName]="i" id="{{toggleValue.id}}" > 
                  <label class="custom-control-label" for="{{toggleValue.id}}">{{toggleValue.label}}</label>
                </div>
              </div>
            </div>


          <div class="col-6 {{isReadOnly ? 'link-disabled' : ''}}"
            *ngFor="let restrictValue of Restrictions;let i = index" formGroupName="restrictionsInfo">
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="{{restrictValue.id}}"
              [(ngModel)]="restrictValue.boolValue" [ngModelOptions]="{standalone: true}"
                >
              <label class="custom-control-label" for="{{restrictValue.id}}">{{restrictValue.label}}</label>
            </div>
            <div class="form-group">
              <input type="text" class="form-control restrictionDate" id="{{restrictValue.id}}" placeholder="MM/DD/YYYY HH:MM AM/PM"
                [disabled]="!restrictValue.boolValue" [(ngModel)]="restrictValue.datetime" (click)="dateRestriction($event, i)" 
                [ngModelOptions]="{standalone: true}" >
            </div>
          </div>

</form>

Answer 1

You don't use [(ngModel)] when using form builder. Instead you should use the formControlName directive. When you are using form builder arrays, you should also the the formArrayName directive.

Also, you need to pass an array of controls to form builder instead of an array of values.

I will create a simple example based on your code to show you how you apply the technique.

If you set up a form in your component like this:

component.ts

ngOnInit() {
  this.values = ['', '', ''];

  this.form = this.formBuilder.group({
    values: this.formBuilder.array(
      // this is an array of controls - NOT values
      this.values.map(x => this.formBuilder.control(x))
    )
  });
}

You can use the directives in the HTML like this:

component.html

<form (submit)="onSubmit()">
  <fieldset [formGroup]="form">
    <div formArrayName="values">
      <div *ngFor="let value of values;let i = index">
        <input [formControlName]="i" />
      </div>
    </div>
    <button>Submit</button>
  </fieldset>
</form>

Notice how I have wrapped the form controls with the formArrayName directive, and set the formControlName to the array index.

DEMO: https://stackblitz.com/edit/angular-lbo6qn

Multiple form controls in an array

If you want to create multiple controls for each item in a form array, you need to set up your form to reflect that. Create a form control for each property within your form array.

this.form = this.FB.group({
  array: this.FB.array(
    this.values.map(x => this.FB.group({
      boolValue: this.FB.control(x.boolValue),
      label: this.FB.control(x.label)
    }))
  )
});

Your HTML structure then matches your form structure:

<form [formGroup]="form" (submit)="onSubmit()">
  <div formArrayName="array">
    <div *ngFor="let value of values;let i = index">
      <div [formGroupName]="i">        
        <input type="checkbox" formControlName="boolValue" /> 
        <input type="text" formControlName="label" />
      </div>
    </div>
  </div>      
   <button>Save</button>
</form>

You can then access the updated values on submit. Again, your query matches the declared structure.

onSubmit() {
  this.form.get('array').value.forEach((formGroup: FormGroup, i: number) => {
    this.values[i].boolValue = formGroup['boolValue'];
    this.values[i].label = formGroup['label'];
  });
}

The key here is that the structure of your form directives in your HTML should match the structure of the formbuilder groups, arrays and controls in your form.

Forked demo: https://stackblitz.com/edit/angular-xopwoz

This is just an example of how you apply the concept, rather than a specific fix to your problem. Your problem uses date fields and jQuery. The question of how to create datepicker input fields in Angular is both out of scope and extensively asked on the internet. It shouldn't be too much of a problem for you to apply my techniques to your codebase.