尝试创建更新函数时，角度中的表单字段不显示已填充的数据

Question

我正在创建一个可以执行 CRUD 操作的 MEAN 应用程序，但是当我创建更新函数时，表单字段不会填充要更新的现有数据。 HTML：

<button
              mat-button
              color="basic"
              [routerLink]="['/moc-report', mocreport._id]"
            >
              Update Status
            </button>

这是按钮，但要更新，但表单不包含更新所需的数据： 包含要更新的数据的表单的 HTML：

<div class="container">
  <!--Navbar-->
  <mat-toolbar color="primary">
    <div class="centerNavBar">
      <a mat-button href="fa-dashboard">Back</a>
      &nbsp;
      <span class="headSpacer">Damage Assessment Tool</span>
      &nbsp;
      <a mat-button href="">Logout</a>
    </div>
  </mat-toolbar>
</div>

<div>
  <mat-sidenav-container class="MainContainter">
    <!--SideNav-->
    <mat-sidenav mode="side" opened>
      <div>
        <a mat-button href="">Message Board</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content class="MainContent">
      <mat-card>
        <mat-card-header class="sect">Create report:</mat-card-header>
        <br /><br />
        <mat-card-content class="centerAlign">
          <!--Div for form-->
          <div>
            <form [formGroup]="form" (submit)="addMOCForm()">
              <mat-form-field class="formwidth">
                <input
                  matInput
                  class="form-control"
                  formControlName="MoCReportDateTime"
                  type="Date"
                  required
                />
              </mat-form-field>
              <br />
              <mat-form-field>
                <mat-label>Comment</mat-label>
                <input
                  placeholder="--"
                  matInput
                  formControlName="MoCDescription"
                  class="form-control"
                  type="string"
                  required
                />
              </mat-form-field>
              <br />
              <mat-form-field>
                <mat-label>Facility In Question</mat-label>
                <input
                  placeholder="--"
                  matInput
                  formControlName="facilityName"
                  class="form-control"
                  type="string"
                  required
                />
              </mat-form-field>
              <mat-card class="centerAlign">
                <mat-card-actions>
                  <!--Div for buttons-->
                  <div>
                    <input
                      style="display: none"
                      #ImageInput
                      type="file"
                      (change)="onFileSelected($event)"
                    />

                    <button
                      mat-raised-button
                      type="button"
                      (click)="ImageInput.click()"
                    >
                      Upload Images
                    </button>
                    &nbsp;
                    <button mat-raised-button color="primary" type="submit">
                      Add
                    </button>
                  </div>
                </mat-card-actions>
              </mat-card>
            </form>
          </div>
        </mat-card-content>
      </mat-card>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

TS：

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

import { HttpClient } from '@angular/common/http';

import { MOCReportService } from 'src/app/service/mocreport.service';

@Component({
  selector: 'app-moc-report',
  templateUrl: './moc-report.component.html',
  styleUrls: ['./moc-report.component.css'],
})
export class MocReportComponent implements OnInit {
  
  image: any;
  Image = [];
  imageData: any;

  constructor(
    private mocreportservice: MOCReportService,
    //private mapService: MocMapService,
    private router: Router,
    private fb: FormBuilder,
    private http: HttpClient
  ) {}
  form = new FormGroup({
    facilityName: new FormControl(''),
    MoCDescription: new FormControl(''),
    MoCReportDateTime: new FormControl(''),
  });

  

  onFileSelected(event: any) {
    const file = (event.target as HTMLInputElement).files;
    this.form.patchValue({ Image: file });
    const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/jpg'];

    {
      const reader = new FileReader();
      reader.onload = () => {
        this.imageData = reader.result as string;
      };
      if (file) {
        reader.readAsDataURL(file[0]);
      }
    }
    console.log(event.target.files[0]);
    const Image = event.target.files[0];
    this.image = Image;
  }

  addMOCForm() {
    console.log('adding');this.MoCReportDateTime, this.mocImage);
    const formData = new FormData();
    formData.append('facilityName', this.form.value.facilityName);
    formData.append('MoCDescription', this.form.value.MoCDescription);
    formData.append(
      'MoCReportDateTimeString',
      this.form.value.MoCReportDateTimeString
    );
    formData.append('mocImage', this.image);
    this.mocreportservice.postMOCForm(formData).subscribe((d) => {
      console.log(d);
    });
    this.router.navigate(['/message-board']);
  }
  
  ngOnInit(): void {}
}

Answer 1

您的问题缺少两件事 - 1.缺少更新表单值的代码。 2.您想要在表单中更新哪些值以及它们在上面提供的代码片段中的位置。

我仍然为您提供解决方案
1.首先更新您的 html 并添加一个单击事件，该事件将用于在单击按钮

HTML:

<button
      mat-button
      color="basic"
      [routerLink]="['/moc-report', mocreport._id]"
      (click)="onUpdateClik()">
      Update Status
    </button>

TS:时更新表单

onUpdateClik(){
        //I'm assuming you want to update the form values which you are getting in form from the template.
        //If you are getting the form values from any API then append those values and you'll be done.
        this.form.patchValue({
            facilityName: this.form.value.facilityName, //update your respective values
            MoCDescription: this.form.value.MoCDescription, //update your respective values
            MoCReportDateTime: this.form.value.MoCReportDateTimeString, //update your respective values
        })
        }