Angular 形式，setValue 后值不能更改

Question

So I have a simple form. The idea is to fill user values in the form so the user will have ability to modify it.

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

The problem is that after I change form values in the OpenEdit function, form values can not be changed from the 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
    });
  }

After submit I always receive the values that were set from component but not on html (here null was set to all values of the form in OpenEdit function and I entered some random data from html):

But if I remove the form fill in the OpenEdit everything is ok: So how should I fill the form data to give the user ability to change it?

Component.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

Problem -

I tried recreating the above on https://stackblitz.com/edit/angular-efnxdy?file=src%2Fapp%2Fapp.component.ts .

The error is that you are calling this.OpenPatientEdit(); , again in the EditPatient() (I suggest renaming this method to saveEdit() ), which is again patching the values from the local patient field and the fields are updated back to the original changes.

Solution - Just change the OpenPatientEdit() method to

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

And `` as

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