CODEWITHSUNDEEP
angularangular-formbuilder
Kerk
Kerk

Reputation: 293

Angular nested formGroups

I have some trouble to update my form with data. I have a nested formGroup in an other formGroup and the data I get is not updating the form, it remains empty. I can see the data in the logs so something is wrong with the forms update.

here's my Component:

this.editForm = this.formBuilder.group({
      id: [],
      date: ['', Validators.required],
      checkboxValue: this.formBuilder.group({ 
        closed: [],
        openFrom: [''],
        openTo: [''],
      })
    });

    console.log(this.editForm.value);
    this.httpClientService.getIrregularDaysById(+irregDayId)
      .subscribe(data => {
        this.irregDay = data;
        this.irregDay.openFrom = this.formatTime(this.irregDay.openFrom);
        this.irregDay.openTo = this.formatTime(this.irregDay.openTo);
        // this.irregDay.date = this.formatDate(this.irregDay.date);
        this.irregDay.closed = this.formatClosed(this.irregDay.closed);

        this.editForm.patchValue(data);
        console.log('getIrregularDaysById: ', data);
        console.log(data.date);
      });

and my HTML:

<div class="col-md-6">
  <h2 class="text-center">Edit irregular day</h2>
  <form [formGroup]="editForm" (ngSubmit)="onSubmit()">

    <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <input matInput readonly [matDatepicker]="picker" placeholder="Please pick a date" formControlName="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
        <mat-error *ngIf="editForm.get('date').errors && (editForm.get('date').touched)">
          Date is required
        </mat-error>
      </mat-form-field>
    </div>

    <div formGroupName="checkboxValue">
      <div class="form-group">
        <mat-checkbox formControlName="closed" class="form-control" color="primary" [(ngModel)]="disabled">
          Closed</mat-checkbox>
      </div>

      <div class="material-input">
        <mat-form-field class="form-group" appearance="outline">
          <mat-label>Open from</mat-label>
          <div class="timepicker">
            <input matInput readonly [disableClick]="true" placeholder="Open from" formControlName="openFrom"
              [ngxTimepicker]="startTimePicker" [format]="24" [disabled]="disabled">
            <ngx-material-timepicker #startTimePicker></ngx-material-timepicker>
            <ngx-material-timepicker-toggle [for]="startTimePicker"></ngx-material-timepicker-toggle>
          </div>
          <mat-error *ngIf="editForm.get('openFrom')?.errors && (editForm.get('openFrom').touched)">
            This field is required
          </mat-error>
        </mat-form-field>
      </div>

      <div class="material-input">
        <mat-form-field class="form-group" appearance="outline">
          <mat-label>Open to</mat-label>
          <div class="timepicker">
            <input matInput readonly [disableClick]="true" placeholder="Open to" formControlName="openTo"
              [ngxTimepicker]="startTimePicker2" [format]="24" [disabled]="disabled">
            <ngx-material-timepicker #startTimePicker2></ngx-material-timepicker>
            <ngx-material-timepicker-toggle [for]="startTimePicker2"></ngx-material-timepicker-toggle>
          </div>
          <mat-error *ngIf="editForm.get('openTo')?.errors && (editForm.get('openTo').touched)">
            This field is required
          </mat-error>
        </mat-form-field>
      </div>
    </div>

    <button mat-raised-button color="primary" type="button" class="btn btn-success" [disabled]="!editForm.valid"
      (click)="onSubmit()" routerLink="/irregulardays">Update</button>
  </form>
</div>

Upvotes: 0

Views: 818

Answers (3)

Kamil Augustyniak
Kamil Augustyniak

Reputation: 429

If you want to update FormGroup you can use patchValue method. This method accepts as parameter object which keys are the same as FormGroup control names.

For example:

this.editForm.patchValue({
      id: data.id,
      date: data.date
      checkboxValue: {...data.checkboxValue}
    }

So if checkboxValue is FormGroup too, you can update this control as:

this.editForm.get('checkboxValue').patchValue({...data.checkboxValue});

Your solution. I don't know interface of data getting in subscribe but I think that it can be correct:

this.httpClientService.getIrregularDaysById(+irregDayId).subscribe(data => {
  this.irregDay = {...data};
  this.irregDay.openFrom = this.formatTime(data.openFrom);
  this.irregDay.openTo = this.formatTime(data.openTo);
  this.irregDay.date = this.formatDate(data.date);
  this.irregDay.closed = this.formatClosed(data.closed);

  this.editForm.patchValue({
    id: data.id,
    date: data.date or this.irregDay.date if you need formatted data
    checkboxValue: {
      closed: data.closed or this.irregDay.closed if you need formatted data
      openFrom:  data.openFrom or this.irregDay.openFrom if you need formatted data
      openTo:  data.openTo or this.irregDay.openTo if you need formatted data
    }
  });
});

Upvotes: 0

Sats
Sats

Reputation: 1973

The formGroup patchvalue method must be given parameter with key and value pair.

formgroup.patchValue({name:’Mocrosoft’});

In your case.

this.editForm.patchValue(
                {   
                  id: data.id,
                  date: data.date, {
                  checkboxValue: { 
                  openFrom: true 
                }}});

I googled a best example i found is this. https://stackblitz.com/edit/angular-patch-value-deeply-nested-component

Upvotes: 0

Soumya Gangamwar
Soumya Gangamwar

Reputation: 1022

You have set like this

this.editForm.patchValue({
    id: ........,
    date: ......
})

Upvotes: 1

Related Questions