带有空对象的补丁值

Question

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

模型.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("/^\d{4}$/")]],
    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
}

Answer 1

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

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

Answer 2

我通常创建一个函数来创建类似的表单

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': [''],
             ...
           }):
   })