反应式表单不更新表单字段Angular 7中的值

Question

我的表单组中的值在提交时没有更新。

我有从 api 引入值的表单组，（它正在工作）但是当我尝试更新值并将其传回时，值没有被更新。我对自己做错了什么感到迷茫。

我在 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

我看到您的 formControls 与 dbrAction 属性具有相同的名称，因此您可以使用 FormBuilder： https://angular.io/api/forms/FormBuilder

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

这将创建一个 formGroup，其中包含 dbrAction 的属性和值（一种使用对象创建 formGroup 的快速方法）。

如果您手动创建 FormGroup（如您所做的那样），您可以使用 patchValue 函数将值放入每个 FormControl：

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

希望对你有帮助

Answer 2

试试这个，希望对你有帮助。

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);
  }