Angular9 - 以模态形式打开反应形式的一部分答案

【问题标题】：Angular9 - open part of reactive form as modalAngular9 - 以模态形式打开反应形式的一部分
【发布时间】：2020-07-29 18:01:06
【问题描述】：

我有一个用于下单的 Angular9 响应式表单。表单非常大，因此表单的某些部分作为模态操作进行操作。例如：您直接在表单中选择一个客户，但是当您想要编辑帐单地址时，您可以通过模态窗口进行。

但是，客户或帐单地址是反应式表单的同一实例的一部分。

棘手的部分是模态动作。如果用户打开帐单地址模式窗口，则有两个按钮（应用或取消）。我只想在用户点击应用时更新帐单地址。现在不会发生这种情况，因为模态窗口使用响应式表单的单个实例的特定 FormGroup 'BillingAddress' 进行操作，因此在模式窗口中键入时会临时更新值。

我的想法是在账单地址模式中创建新的、简化的响应式表单实例，从“主表单”加载，如果用户点击应用，则获取其值并将其修补到主表单。

是否有任何其他推荐的解决方法或“角度方式”如何处理？

谢谢！

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

您需要将“数据”传递给模态，在“确定”中创建一个patchValue，您可以使用setter来创建表单

例如使用ng-bootstrap modal

你的模态就像

  <div [formGroup]="form">
     <input formControlName="name">
     <input formControlName="surname">
  </div>
  <button type="button" class="btn btn-outline-dark" 
        (click)="activeModal.dismiss('Close click')">Cancel</button>
  <button type="button" class="btn btn-outline-dark" 
        (click)="activeModal.close(this.form.value)">Ok</button>

在 NgbModal 中看到，按钮“确定”使用close 函数关闭，并作为参数传递表单的值，而“取消”使用dismiss

您的模态组件具有可变形式（一个 formGroup）和一个作为 setter 的 @Input() data

  form:FormGroup
  @Input() set data(value)
  {
    value=value || {name:null,surname:null}
    this.form=new FormGroup({
       name:new FormControl(value.name),
       surname:new FormControl(value.surname)
    })
  }

您需要的最后一个，当打开模式时，将数据传递给引用，当关闭时使用设置路径

 //imagine your form is like
 form:FormGroup=new FormGroup({
    customer:new FormGroup({
       name:new FormControl("Name"),
       surname:new FormControl("Surname")
    })
  })


 open() {
    const modalRef = this.modalService.open(NgbdModalContent)

    //see you pass as data "this.form.value.customer"
    modalRef.componentInstance.data = this.form.value.customer;

    modalRef.result.then(
      (result) => {

       //see you use setPath (or setValue)
         this.form.get('customer').patchValue(result)

    }, (reason) => {
      
    });
  }

simple stackblitz

更新像这样维护有点困难，因为您需要在模态和主组件中创建相同的表单。您可以在文件中创建表单，例如

import { FormGroup, FormControl } from "@angular/forms";

export  abstract class Model{
  public static getCustomer=getCustomer
}

function  getCustomer(value):FormGroup {
    value = value || { name: null, surname: null };
    return new FormGroup({
      name: new FormControl(value.name),
      surname: new FormControl(value.surname)
    });
  }

然后，你导入抽象类 Model

import {Model} from './model-form'

并创建类似的表单

//in main component
form:FormGroup=new FormGroup({
    customer:Model.getCustomer({name:"Name",surname:"Surname"})
})

//in modal
@Input() set data(value)
{
    this.form=Model.getCustomer(value)
}

【讨论】：