Record Type Selection in LWC

Question

I'm trying to create record Type selection screen in LWC, but getting this error

afterRender threw an error in 'c:createContact' [Cannot read property 'recordTypeInfos' of undefined]

HTML:

<template>
    <lightning-combobox name="recordType" label="Record Type" placeholder="Choose Status"
                        value={value} 
                        options={recordTypeId}>

    </lightning-combobox>
</template>

JS:

import { LightningElement, track, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import CONTACT_OBJECT from '@salesforce/schema/Contact';

export default class CreateContact extends LightningElement {

    @track statusOptions;
    @track value;
    @api objectApiName;

    @track objectInfo;

    @wire(getObjectInfo, { objectApiName: CONTACT_OBJECT,})
    objectInfo;


    get recordTypeId() {
        // Returns a map of record type Ids 
        console.log(this.objectInfo);
        const rtis = this.objectInfo.data.recordTypeInfos;
        return rtis;
    }

}

Answer 1

First thing i would do is put the combobox inside a div and only open it up once the wire data for recordtype comes from the object.

<div if:true={objectInfo.data}>
<lightning-combobox name="recordType" label="Record Type" placeholder="Choose Status"
value={value} 
options={recordTypeId1}>
</lightning-combobox>
</div>

Secondly in javascript where you are constructing the combobox for UI ,you need to match the format of lightning combobox specified in its documentation

 get recordTypeId1() {
      var recordtypeinfo = this.objectInfo.data.recordTypeInfos;
      var uiCombobox = [];
      console.log("recordtype" + recordtypeinfo);
      for(var eachRecordtype in  recordtypeinfo)//this is to match structure of lightning combo box
      {
        if(recordtypeinfo.hasOwnProperty(eachRecordtype))
        uiCombobox.push({ label: recordtypeinfo[eachRecordtype].name, value: recordtypeinfo[eachRecordtype].name })
      }
      console.log('uiCombobox' + JSON.stringify(uiCombobox));
    return uiCombobox;
  }

Once the wire data comes back the combobox will openup in markup and your getter function will run

@wire(getObjectInfo, { objectApiName: CONTACT_OBJECT}) objectInfo;

Also the default value for the combo box UI, put a value which is in your object.

@track value = 'Client User';