web-dev-qa-db-ja.com

nullオブジェクトのパッチ値

Angular 6を使用していて、patchValueを実行して、観察可能なhttp呼び出しからのデータをフォームに入力しようとしています。入力するjsonをnullにすることができるsecondaryPhone値があることを除いて、すべてがうまく機能します監視可能なオブジェクト。nullの場合、「未定義またはnullをオブジェクトに変換できません」というエラーが表示されます。nullでない場合はすべての値に個別にパッチを適用できますが、手動でパッチを適用せずにこの値を読み込む方法はありますかすべての値？

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の例

{
    "userId": 6,
    ...,
    "primaryPhone": {
        "phoneId": 2,
        "phoneTypeId": 2,
        "phoneNumber": "3030303303",
        "internationalPhone": ""
    },
    "secondaryPhone": null
}
angulartypescriptangular6angular-reactive-formsangular-observable
6
user1041169

私は通常、次のようなフォームを作成する関数を作成します

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がnullかどうかを管理します。

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