Patchvalue with null object

Question

I am using Angular 6 and I am trying to perform patchValue to populate my form with data from an observable http call. Everything works great except I have a secondaryPhone value that can be null the json that populates the observable object. When it is null I get an error "Cannot convert undefined or null to object". I know I can manually patch every value individually if it is not null but is there a way to load this value without having to manually patch every value?

Model.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;
}

component.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 example

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

Answer 1

While we wait for this issue to be resolved, change null values to empty objects before patching:

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

Answer 2

I usually make a function to create the form like

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

so I can call to the function like

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

Yo manage if secondaryPhone is null or not we can simply

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