Angular 8：反应式表单自动映射和 PatchValue 设置成员数据

Posted 2023-03-13

【中文标题】Angular 8：反应式表单自动映射和 PatchValue 设置成员数据

【英文标题】：Angular 8: Reactive Form Automap and PatchValue Set Member data

【发布时间】：2020-03-06 18:43:23

【问题描述】：

有没有一种简单的方法可以使用自动映射器修补 Angular 表单？我想上课，并将完全相同的成员姓名放入表格中。我不喜欢写，因为公司有很多形式，并试图远离重复编码（干原则）等

this.editAddressForm.patchValue(
     'streetNumber':  this.addressMailingData.streetNumber,
     'predirectional':  this.addressMailingData.predirectional,
     'streetName':  this.addressMailingData.streetName,
     'streetType':  this.addressMailingData.streetType,
     'postdirectional':  this.addressMailingData.postdirectional,
     'city': this.addressMailingData.city,
     'state': this.addressMailingData.state,
     'postalCode':  this.addressMailingData.postalCode

尝试的解决方案：这样做会导致以下错误

this.editAddressForm.patchValue(this.addressMailingData);

错误：'string' 类型的参数不可分配给' [key: string]: any; '

【参考方案1】：

如果表单模型和数据希望补丁对象具有相同的值，那么试试这个。

this.editAddressForm.patchValue(this.addressMailingData);

【讨论】：

您在发布答案之前尝试过吗，收到此“'string' 类型的参数不可分配给' [key: string]: any; ' 类型的参数”

这就是为什么您需要确保传递给 patchValue 方法的对象具有正确的值。

是的，这是编译错误，而不是运行时错误，你有没有为这个工作的堆栈闪电？谢谢

这里是stackblitz链接stackblitz.com/edit/santoshangular-reactive-form?file=src/app/…

嗨，谢谢，试图弄清楚为什么你的工作，我的数据模型类有 10 个成员，比较表单上的 5 个成员，但我只想映射共享的 5 个，

【参考方案2】：

更多自定义：

customPatchValue(keys : string[], data: any, formgroup: FormGroup):

参数：

keys：您要将值映射到的字符串数组 表单组 数据：具有要为 formGroup 设置的值的对象 formGroup：要应用更改的表单组

customPatchValue(keys: string[] = null, data: any, formGroup: FormGroup) 
  Object.keys(data).forEach(key => 
    if (!keys || keys.length == 0 || keys.some(x => x == key)) 
      formGroup.patchValue( [key]: data[key] )
     else 
      console.log("Non matching key", key);
    
  );

这里是 TS 代码：

import  Component  from "@angular/core";
import  FormGroup, FormControl  from "@angular/forms";

@Component(
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
)
export class AppComponent 
  form: FormGroup;

  obj: any =  name: "Prashant", surname: "Pimpale" ;

  constructor() 
    this.form = new FormGroup(
      name: new FormControl(""),
      surname: new FormControl("")
    );
    // Here
    this.customPatchValue(['name'], this.obj, this.form);
  

  customPatchValue(keys: string[] = null, data: any, formGroup: FormGroup) 
    Object.keys(data).forEach(key => 
      if (!keys || keys.length == 0 || keys.some(x => x == key)) 
        formGroup.patchValue( [key]: data[key] )
       else 
        console.log("Non matching keys", key);
      
    );
    return formGroup;
  

A Working Demo