如何在打开之前在模式内设置反应式表单字段？答案

【问题标题】：How to set reactive form field inside modal prior to opening?如何在打开之前在模式内设置反应式表单字段？
【发布时间】：2020-10-17 18:54:42
【问题描述】：

我已经编写约会管理系统一年多了，在那段时间里，我看到了各种角度更新，即角度 7 -> 角度 8 -> 9 -> 现在是 10。

每个更新都导致了一些小的重大更改，但很容易修复。

我不是 100% 确定，但我认为 angular 10 的最后一次更新破坏了我在模态中的反应形式。

有 bug 的 Angular 组件的简要说明：基本上是一个包含具有后端数据库表内容的数据表的组件。当用户双击其中一行并打开包含响应式表单以允许用户编辑数据库记录的模式时。

我正在使用以下“打开”功能打开一个 ng-bootstrap 模式：

open(title:string, code:string, desc:string, type:string, message:string, updType:string) {

const modalRef = this.modalService.open(
  MediaModalComponent,
  {
    size: 'xl',
    windowClass: 'custom-class'
  });


  modalRef.componentInstance.title = title;
  modalRef.componentInstance.code = code;
  modalRef.componentInstance.desc = desc;
  modalRef.componentInstance.type = type;
  modalRef.componentInstance.message = message;
  modalRef.componentInstance.updType = updType;

  this.mediaModal.mediaForm.patchValue({
    code: code,
    desc: desc,
    type: type,
    message: message
  });


  modalRef.componentInstance.refreshTable.subscribe(() => {
    this.getMediaData();
  })


}

不幸的是，patchValue 函数似乎不起作用，因为打开模式时我的表单字段为空。

在创建新问题之前，我已使用以下资源尝试自己找到解决方案：

在此先感谢您的帮助，我们非常感谢。我希望在接下来的几周内将该应用程序上线，但只注意到了这个错误。

【问题讨论】：

标签： angular angular-reactive-forms reactive-forms

【解决方案1】：

我认为问题不在于 Angular 版本和响应式表单。与 Angular2 相比，唯一的变化是 .ts 更加严格，并且在订阅 valueChanges 时，res 的值与 form.value.control 和 form.get('control').value 的值不同.

我不知道你在那里定义你的this.mediaModal.mediaForm。你要写吗

modalRef.componentInstance.mediaForm.pathValue(....)

如果您在 ngOnInit 中创建 formGroup，也许您需要“等待”Angular 创建表单。那就是使用 setTimeout

setTimeout(()=>{
    modalRef.componentInstance.mediaForm.pathValue(....)
})

【讨论】：