Question

我正在使用Angular 6，并且试图执行patchValue来用来自可观察到的http调用的数据填充表单。一切工作正常，除了我有secondaryPhone值，该值可以为null填充可观察对象的json。当它为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]]
    })
});

杰森的例子

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

Answer 1

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

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

Answer 2

我通常会创建一个函数来创建类似

的表格

  private DirectionsResult getDirectionsDetails(String origin, String destination, TravelMode mode) {
    mMap.clear();
    DateTime now = new DateTime();
    try {
        return DirectionsApi.newRequest(getGeoContext())
                .mode(mode)
                .origin(origin)
                .destination(destination)
                .departureTime(now)
                .await();
    } catch (ApiException e) {
        e.printStackTrace();
        return null;
    } catch (InterruptedException e) {
        e.printStackTrace();
        return null;
    } catch (IOException e) {
        e.printStackTrace();
        return null;
    }
}

private GeoApiContext getGeoContext() {
    GeoApiContext geoApiContext = new GeoApiContext();
    return geoApiContext
            .setQueryRateLimit(3)
            .setApiKey(getResources().getString(R.string.apikey))
            .setConnectTimeout(1, TimeUnit.SECONDS)
            .setReadTimeout(1, TimeUnit.SECONDS)
            .setWriteTimeout(1, TimeUnit.SECONDS);


}

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

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

您可以管理secondaryPhone是否为空

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

具有空对象的Patchvalue

2 个答案: