Reactive Forms Not Updating Value In Form Field Angular 7

Question

I'm having an issue where the values in my formgroup is not being updated on submission.

I have formgroup that brings in values from an api, (which is working) but when I am trying to update the value and pass it back, the values are not being updated. I'm lost on what I am doing wrong.

I'm using reactive forms with Angular 7.

modify-view-action.component.html

    <div fxLayout="column" fxLayoutGap="25px" class="modify-view-container">
  <mat-card class="view-settings-descrpition-card">
    <mat-card-content fxLayout="column">

      <form [formGroup]="modifyActionForm">
        <div class="container" fxLayout="row" fxLayoutGap="25px">
          <div class="column1" fxLayout="column">
            <p>Folder: {{dbrAction.FolderTag.Value}}</p>
            <p>Primary Table: {{dbrAction.PrimaryTable}}</p>
            <p>Special Use: {{dbrAction.SpecialUse}}</p>
            <mat-form-field>
              <mat-label>Name</mat-label>
              <input matInput formControlName="ActionName">
            </mat-form-field>
            <mat-form-field>
              <mat-label>Keywords</mat-label>
              <input matInput formControlName="Keywords">
            </mat-form-field>
            <mat-form-field>
              <mat-label>Description</mat-label>
              <input matInput formControlName="Description">
            </mat-form-field>
            <mat-form-field>
              <mat-label>Icon</mat-label>
              <mat-select formControlName="Icon" ngDefaultControl>
                <mat-option formControlName="Icon"
                  ngDefaultControl>
                  {{dbrAction.Icon}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-label>Priority</mat-label>
              <input matInput formControlName="Priority">
            </mat-form-field>
            <mat-form-field>
              <mat-label>Title Font Size</mat-label>
              <mat-select formControlName="TitleFontSize" [value]="dbrAction.TitleFontSize" ngDefaultControl>
                <mat-option formControlName="TitleFontSize" [value]="dbrAction.TitleFontSize" ngDefaultControl>
                  {{dbrAction.TitleFontSize}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-label>Subtitle Font Size</mat-label>
              <mat-select formControlName="SubtitleFontSize" [value]="dbrAction.SubtitleFontSize" ngDefaultControl>
                <mat-option formControlName="SubtitleFontSize" [value]="dbrAction.SubtitleFontSize" ngDefaultControl>
                  {{dbrAction.SubtitleFontSize}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-label>Print Title Font Size</mat-label>
              <mat-select formControlName="PrintTitleSize" [value]="dbrAction.PrintTitleSize" ngDefaultControl>
                <mat-option formControlName="PrintTitleSize" [value]="dbrAction.PrintTitleSize" ngDefaultControl>
                  {{dbrAction.PrintTitleSize}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-label>Print Subtitle Font Size</mat-label>
              <mat-select formControlName="PrintSubtitleSize" [value]="dbrAction.PrintSubtitleSize" ngDefaultControl>
                <mat-option formControlName="PrintSubtitleSize" [value]="dbrAction.PrintSubtitleSize" ngDefaultControl>
                  {{dbrAction.PrintSubtitleSize}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <!-- <mat-form-field>
              <mat-checkbox matInput formControlName="IsActive" [(ngModel)]="dbrAction.IsActive" [value]="dbrAction.IsActive" [labelPosition]="labelPosition">Is Active: </mat-checkbox>
            </mat-form-field> -->
          </div>
        </div>
      </form>

modify-view-action.component.ts

    import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'modify-view-action',
  templateUrl: './modify-view-action.component.html',
  styleUrls: ['./modify-view-action.component.scss']
})
export class ModifyViewActionComponent implements OnInit {
  objectData: any;

  constructor(private fb: FormBuilder) { }

  dbrAction: any;
  labelPosition: 'before' | 'after' = 'before';
  modifyActionForm: FormGroup;

  ngOnInit() {
    this.initData();
    this.modifyActionForm = this.fb.group({
    FolderTag: new FormControl(this.dbrAction.FolderTag),
    PrimaryTable: new FormControl(this.dbrAction.PrimaryTable),
    SpecialUse: new FormControl(this.dbrAction.SpecialUse),
    ActionName: new FormControl(this.dbrAction.ActionName),
    Keywords: new FormControl(this.dbrAction.Keywords),
    Description: new FormControl(this.dbrAction.Description),
    Icon: new FormControl(this.dbrAction.Icon),
    Priority: new FormControl(this.dbrAction.Priority),
    TitleFontSize: new FormControl(this.dbrAction.TitleFontSize),
    SubtitleFontSize: new FormControl(this.dbrAction.SubtitleFontSize),
    PrintTitleSize: new FormControl(this.dbrAction.PrintTitleSize),
    PrintSubtitleSize: new FormControl(this.dbrAction.PrintSubtitleSize),
    IsActive: new FormControl(this.dbrAction.IsActive)
    });

    this.objectData = this.modifyActionForm.value;
    console.log(this.objectData);
  }

  get f() { return this.modifyActionForm.controls; }


initData() {
    this.dbrAction = JSON.parse(localStorage.getItem('DbrAction'));
  }
}

Answer 1

I see that your formControls has same name as dbrAction properties, so you can use FormBuilder: https://angular.io/api/forms/FormBuilder

this.modifyActionForm = this.formBuilder.group(this.dbAction);

This will create a formGroup, with properties, and values of dbrAction (a fast way to create a formGroup with an object).

If you create the FormGroup manually (as you did), you can use patchValue function, to put value into each FormControl:

  this.modifyActionForm.patchValue({
     FolderTag: this.dbrAction.FolderTag,
     PrimaryTable: this.dbrAction.PrimaryTable,
     SpecialUse: this.dbrAction.SpecialUse,
     ActionName: this.dbrAction.ActionName
     ....
  })

Hope it will helps you

Answer 2

Try this i hope this will help you.

ngOnInit() {
    this.initData();
    this.modifyActionForm = this.fb.group({
    FolderTag: [this.dbrAction.FolderTag],
    PrimaryTable: [this.dbrAction.PrimaryTable],
    SpecialUse: [this.dbrAction.SpecialUse],
    ActionName:[this.dbrAction.ActionName],
    Keywords: [this.dbrAction.Keywords],
    Description: [this.dbrAction.Description],
    Icon: [this.dbrAction.Icon],
    Priority: [this.dbrAction.Priority],
    TitleFontSize: [this.dbrAction.TitleFontSize],
    SubtitleFontSize: [this.dbrAction.SubtitleFontSize],
    PrintTitleSize: [this.dbrAction.PrintTitleSize],
    PrintSubtitleSize: [this.dbrAction.PrintSubtitleSize],
    IsActive: [this.dbrAction.IsActive]
    });

    this.objectData = this.modifyActionForm.value;
    console.log(this.objectData);
  }