带有空对象的补丁值

Posted 2023-03-07

【中文标题】带有空对象的补丁值

【英文标题】：Patchvalue with null object

【发布时间】：2019-01-22 18:21:59

【问题描述】：

我正在使用 Angular 6，并且我正在尝试执行 patchValue 以使用来自可观察 http 调用的数据填充我的表单。一切都很好，除了我有一个可以为 null 填充可观察对象的 json 的secondaryPhone 值。当它为空时，我收到错误“无法将未定义或空值转换为对象”。我知道如果每个值不为空，我可以单独手动修补每个值，但有没有办法加载这个值而无需手动修补每个值？

模型.ts

export class UserInfoModel 
    userId: number;
    dob: Date;
    firstName: string;
    middleInitial: string;
    lastName: string;
    genderTypeId: number;
    ssnLast4: string;
    userAddresses: UserAddress[];
    primaryPhone?: Phone;
    secondaryPhone?: Phone;
    fax?: Phone;


export class Address 
    address1: string;
    address2: string;
    city: string;
    stateCd: string;
    zipCode: string;
    internationalAddress: string;
    countryId: number;


export class UserAddress 
    userAddressId: number;
    userId: number;
    active: boolean;
    address: Address;


export class Phone 
    phoneId: number;
    phoneTypeId: number;
    phoneNumber: string;
    internationalPhone: string;

组件.ts

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => 
    this.userInfoModel$ = data as UserInfoModel;
    this.userInfoForm.patchValue(this.userInfoModel$);
);

this.userInfoForm = this.fb.group(
    'userId': ['', [Validators.required]],
    'dob': [null, [Validators.required]],
    'firstName': ['', [Validators.required, Validators.maxLength(50)]],
    'middleInitial': ['', [Validators.maxLength(1)]],
    'lastName': ['', [Validators.required]],
    'genderTypeId': ['', [Validators.required]],
    //TODO: Add conditional requirement
    'ssnLast4': ['', [Validators.pattern("/^\d4$/")]],
    userAddresses: this.fb.array([
        this.fb.group(
            'userAddressId': [''],
            'userId': ['', [Validators.required]],
            'active': ['', [Validators.required]],
            address: this.fb.group(
                'address1': ['', [Validators.required]],
                'address2': ['', [Validators.required]],
                'city': ['', [Validators.required]],
                'stateCd': ['', [Validators.required]],
                'zipCode': ['', [Validators.required]],
                'internationalAddress': ['', [Validators.required]],
                'countryId': ['', [Validators.required]]
            )
        )
    ]),
    primaryPhone: this.fb.group(
        'phoneId': [''],
        'phoneTypeId': ['', [Validators.required]],
        'phoneNumber': ['', [Validators.required]],
        'internationalPhone': ['', [Validators.required]]
    ),
    secondaryPhone: this.fb.group(
        'phoneId': [''],
        'phoneTypeId': ['', [Validators.required]],
        'phoneNumber': ['', [Validators.required]],
        'internationalPhone': ['', [Validators.required]]
    )
);

Json 示例

    "userId": 6,
    ...,
    "primaryPhone": 
        "phoneId": 2,
        "phoneTypeId": 2,
        "phoneNumber": "3030303303",
        "internationalPhone": ""
    ,
    "secondaryPhone": null

【问题讨论】：

请为这个问题投票（已开放一年多）-github.com/angular/angular/issues/21021

【参考方案1】：

我通常会做一个函数来创建像这样的表单

buildForm(data:any)

   let form= this.fb.group(
      'userId': [data?data.userId:'', [Validators.required]],
      'dob': [data?data.dob:null, [Validators.required]],
      ...
   )
   return form;

所以我可以像这样调用函数

this.userInfoForm=this.buildForm(data); //create the form with data
this.userInfoForm=this.buildForm(null); //create a empty form

如果secondaryPhone 是否为空，请自行管理

   let form= this.fb.group(
      'userId': [data?data.userId:'', [Validators.required]],
      'dob': [data?data.dob:null, [Validators.required]],
      ...
      secondaryPhone: data && data.secondaryPhone? //if data && data.secondaryPhone
           this.fb.group(
             'phoneId': [data.secondatyPhone.phoneId],
             ...
           ): //else the values are empty
           this.fb.group(
             'phoneId': [''],
             ...
           ):
   )

【参考方案2】：

在我们等待解决 this issue 的同时，在修补之前将 null 的值更改为空对象：

this.form.patchValue(
  ...data,
  secondaryPhone: data.secondaryPhone || 
)