时间戳

首页 > 解决方案 > 重置表单后无法第二次将值设置为反应式表单

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

问题描述

使用响应式表单，当我们单击编辑特定用户时，使用 setValue 方法填充到表单控件中。然后，当我单击保存按钮时，我正在使用 reset() 方法清除表单。

现在，如果单击另一个用户的编辑按钮，我将填充与上面相同的数据，但 setValue 或 patchValue 不会将数据添加到表单字段中

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

标签： angular

解决方案

您的问题与Change Detection相关。

您的代码有问题：

您正在将值从父组件发送到子组件，并且您正在调用您的edit方法，ngOnChanges该方法将在 Angular Change Detection 期间运行。

在您的父组件edit方法中，您有：

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

现在，如果您单击相同的用户编辑按钮，this.user则不会更改，也不会触发ngOnChanges子组件的方法，并且不会填充表单。

解决方案：（您可以在此处找到工作的 stackbliz 演示 ）

即使您单击同一个用户编辑按钮并手动触发更改检测，您也需要每次更改用户的值。

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

您的ngOnChanges遗嘱如下所示：

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

希望能帮助到你。

推荐阅读