如何清除“编辑模态”对话框弹出表单数据并使用新数据进行更新

Question

这段代码是我的“编辑”按钮。

这里的问题是我无法用其他组件中的正确数据填写表单。同样，当我使用它时，（编辑）按钮会使用不同的数据，但它不会填写我的表单并卡在旧数据上，因此我需要帮助才能成功。

public editUser(user: User): void {
   var id = user.Id;
   localStorage.removeItem("Id");
   localStorage.setItem("Id", id.toString());
   this.userComponent.openModal("custom-modal",user);
};

这是代码的另一部分，与“编辑”按钮位于不同的组件中。：

ngOnInit() {
var id = localStorage.getItem('Id');
localStorage.removeItem('Id');

if (id) {
  this.userService.getById(id).subscribe(res => this.item = res);
  console.log(id);
}

this.myGroup = new FormGroup({
    Id: new FormControl(),
    UserName: new FormControl(),
    Password: new FormControl(),
    FirstName: new FormControl(),
    LastName: new FormControl(),
    Email: new FormControl()
  });
}

每次单击按钮后在浏览器控制台中显示结果的图片。

Answer 1

要以反应形式更新数据，您必须使用patchValue()。

this.myGroup.patchValue({'FirstName':'John Doe'});

对我有用。