Angular 形式，setValue 后值不能更改

Question

所以我有一個簡單的表格。 這個想法是在表單中填寫用戶值，以便用戶能夠修改它。

<button mat-raised-button color="primary" (click)="OpenPatientEdit()">Edit</button>
  <div *ngIf="isEdit">
    <form [formGroup]="patientFormGroup" fxFlex="70">
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput formControlName="name">
      </mat-form-field>
      <br>
      <mat-form-field>
        <mat-label>Surname</mat-label>
        <input matInput formControlName="surname">
      </mat-form-field>
      <br>
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="address">
      </mat-form-field>
      <br>
      <mat-form-field>
        <mat-label>Phone</mat-label>
        <input matInput formControlName="phone">
      </mat-form-field>
    </form>
    <button mat-raised-button color="primary" (click)="EditPatient()">Submit</button>
  </div>

問題是我在 OpenEdit function 中更改表單值后，無法從 html 更改表單值。

  OpenPatientEdit() {
    this.isEdit = !this.isEdit;

    this.patientFormGroup.patchValue({
      name: this.patient.name, 
      surname: this.patient.surname,
      address: this.patient.address,
      phone: this.patient.phone
    });
  }

提交后，我總是收到從組件設置但不在 html 上設置的值（這里 null 設置為 OpenEdit function 中表單的所有值，我從 html 輸入了一些隨機數據：

但是，如果我刪除了 OpenEdit 中的表格，一切正常： 那么我應該如何填寫表單數據以使用戶能夠更改它呢？

組件.ts：

import { Component, OnInit } from '@angular/core';

import { HomeDetails } from '../models/home.details.interface';
import { DashboardService } from '../services/dashboard.service';
import { UserTypeService } from '../../shared/services/user-type.service'
import { Doctor } from '../../shared/models/doctor'
import { PatientViewModel } from '../../shared/models/patient-view-model'
import { Subscription } from 'rxjs';
import { FormBuilder, FormControl, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { Patient } from '../../shared/models/patient'
import { UserService } from '../../shared/services/user.service'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  private userTypeSubscription: Subscription;
  userType = "";
  doctor: Doctor;
  patient: PatientViewModel;
  isEdit = false;
  patientFormGroup = this._fb.group({
    name: [null, Validators.required],
    surname: [null, Validators.required],
    address: [null, Validators.required],
    phone: [null, Validators.required],
  });

  constructor(private dashboardService: DashboardService, private userTypeService: UserTypeService, private _fb: FormBuilder, private userService: UserService) { }

  ngOnInit() {
    this.userTypeSubscription = this.userTypeService.userType.subscribe(userType => {
      this.userType = userType;
      if (this.userType == 'Doctor') {
        this.GetDoctor();
      }
      if (this.userType == 'Patient') {
        this.GetPatient();
      }
    })
  }

  GetDoctor() {
    this.dashboardService.GetDoctorHome().subscribe(data => {
      this.doctor = data;
    },
      error => {
        console.log(error);
      });
  }

  GetPatient() {
    this.dashboardService.GetPatientHome().subscribe(data => {
      this.patient = data;
    },
      error => {
        console.log(error);
      });
  }

  OpenPatientEdit() {
    this.isEdit = !this.isEdit;

    this.patientFormGroup.patchValue({
      name: this.patient.name, 
      surname: this.patient.surname,
      address: this.patient.address,
      phone: this.patient.phone
    });

    // this.patientFormGroup.get('name').setValue(this.patient.name);
    // this.patientFormGroup.get('surname').setValue(this.patient.surname);
    // this.patientFormGroup.get('address').setValue(this.patient.address);
    // this.patientFormGroup.get('phone').setValue(this.patient.phone);
  }

  EditPatient() {
    this.OpenPatientEdit();

    var patient: Patient = {
      patientId: -1,
      name: this.patientFormGroup.get('name').value,
      surname: this.patientFormGroup.get('surname').value,
      dob: null,
      address: this.patientFormGroup.get('address').value,
      phone: this.patientFormGroup.get('phone').value
    }

    debugger;
    // this.userService.PutPatient(patient).subscribe((data) => {
    //   this.GetPatient()
    // }, error => {
    //   console.log(error)
    // })
  }
}

Answer 1

問題-

我嘗試在https://stackblitz.com/edit/angular-efnxdy?file=src%2Fapp%2Fapp.component.ts上重新創建上述內容。

錯誤是您正在調用this.OpenPatientEdit(); ，再次在EditPatient()中（我建議將此方法重命名為saveEdit() ），這再次修補了本地患者字段中的值，並且這些字段被更新回原始更改。

解決方案- 只需將OpenPatientEdit()方法更改為

  OpenPatientEdit() {

    this.isEdit = true;                  <---------CHANGE THIS TO true, to show the form 

    this.patientFormGroup.patchValue({
      name: this.patient.name, 
      surname: this.patient.surname,
      address: this.patient.address,
      phone: this.patient.phone
    });
  }

和``作為

EditPatient() {

    this.isEdit = false;                 <---------CHANGE THIS TO false, to hide the form 

    var patient: Patient = {
      patientId: -1,
      name: this.patientFormGroup.get('name').value,
      surname: this.patientFormGroup.get('surname').value,
      dob: null,
      address: this.patientFormGroup.get('address').value,
      phone: this.patientFormGroup.get('phone').value
    }
}