重置表单后无法第二次将值设置为反应式表单

Question

Using reactive forms, when we click on edit a particular user using setValue methods am populating into form controls. Then when i click on save button i am clearing the form using reset() method.

Now if click on the edit button for another user i am populating the data same as above, but setValue or patchValue is not adding data into form fields

https://stackblitz.com/edit/angular-dzyjig

Answer 1

Your problem is related to Change Detection .

Problem with your code:

You are sending the value from parent component to child component and you are calling your edit method inside the ngOnChanges which will run during Angular Change Detection.

In your parent component edit method, you have:

edit(user){
   this.user = user;
   console.log(this.user);
}

Now if you click on the same user edit button, this.user will not change and it will not trigger the ngOnChanges method of your child component and your form will not populate.

Solution:(You can find the working stackbliz demo here )

You need to change the value of the user every time even when you click on the same user edit button and trigger change detection manually.

import { Component } from '@angular/core';
import { FormGroup, Validators, FormBuilder} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private formBuilder: FormBuilder, private cd: ChangeDetectorRef){
  }

  edit(user){
    this.user = null;
    this.cd.detectChanges();
   this.user = user;
   console.log(this.user);
  }
}

Your ngOnChanges will look like this:

ngOnChanges(){
    if(this.user) {
      this.edit();
    }
  }