Javascript 被动表单不更新表单字段7中的值

我有一个问题，我的formgroup中的值在提交时没有更新

我有一个formgroup，它从一个api（正在工作）引入值，但是当我试图更新值并将其传递回时，这些值没有被更新。我不知道我做错了什么

我用的是角7的反应形式

修改视图操作.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>

---

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

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

---

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

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

---

我发现您的formControls与dbrAction属性具有相同的名称，因此您可以使用FormBuilder：

这将创建一个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
     ....
  })

---

希望它能帮助您

我发现您的formControls与dbrAction属性同名，因此您可以使用FormBuilder：

这将创建一个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
     ....
  })

---

希望它能帮助您

为什么要在输入元素上使用value属性？抱歉，删除了，这并没有解决问题，仍然存在相同的问题@Chellappanவ您必须使用setValue或patchValue方法来设置表单Dyanmicalyss的值我还在这里讨论如何使用这个问题您是否尝试过@Soukyone答案？为什么在输入元素上使用value属性？抱歉，删除了，这并没有解决问题，仍然有相同的问题@Chellappanவ您必须使用setValue或patchValue方法来设置表单Dyanmicalyss的值我仍然在这里讨论如何使用它您是否尝试过@Soukyone答案？这肯定有帮助。。。我将把这个补丁值函数放在哪里？在ngOnInit之后？对不起，我有点晚了，但最好的方法是在创建formGroup和成功初始化您的dbrAction之后执行修补程序功能。这肯定会有帮助。。。我将把这个补丁值函数放在哪里？在ngOnInit之后？对不起，我有点晚了，但最好的方法是在formGroup被创建，并且您的dbrAction成功初始化之后，执行补丁函数。