The Custom Double ID Input Widget allows users to enter and validate two identification numbers simultaneously (e.g., husband and wife IDs) against an external endpoint. It supports multiple ID types with format validation and dynamic field population based on fetched data.
This widget is designed for scenarios where two related identities must be validated and linked:
Dual ID inputs: Supports two separate IDs (firstIdentity and secondIdentity), each with its own type, placeholder, and value key.
Endpoint integration: Fetches and validates data from APIs using endpointCode or url.
Populates other fields: Can auto-fill other fields in the form based on fetched response (supports populateRelativeToRootForm).
Allowed document types: Supports multiple document types (National ID, Passport, NIN, UNHCR Proof, etc.) with regex, min/max length, and placeholders.
Validation:
required: Ensures both IDs are provided if mandatory.invalidInput: Triggered if the fetched response is invalid.| Prop | Type | Description |
|---|---|---|
firstIdentityLabel |
string | Label for first ID input (e.g., Husband) |
secondIdentityLabel |
string | Label for second ID input (e.g., Wife) |
allowedDocumentTypes |
array | Defines allowed ID types with patterns and length constraints |
endpointCode |
string | API code used to fetch related data |
populates |
array | Maps response fields to target form fields |
populateRelativeToRootForm |
boolean | Allows populating fields outside the same block/section |
firstIdentityValueKey |
string | Key in form state for first ID |
secondIdentityValueKey |
string | Key in form state for second ID |
Complete JSON Object
{
"key": "CustomDoubleIdInputHAQS2",
"id": "formly_422_customdoubleidinput_CustomDoubleIdInputHAQS2_0",
"type": "customdoubleidinput",
"props": {
"url": "/integration/v1/fetch/sync",
"label": "",
"disabled": false,
"required": true,
"populates": [
{
"valueKey": "husbandDetails.surName",
"targetKey": "TextInputHAQS2"
},
{
"valueKey": "civilStatusOfficeName",
"targetKey": "Textinput2JEbTQ"
}
],
"useBaseUrl": true,
"placeholder": "Text Input",
"endpointCode": "FGETMARRIAGERECORD",
"firstIdentityLabel": "Husband",
"secondIdentityLabel": "Wife",
"allowedDocumentTypes": [
{
"label": "National ID",
"value": "NID",
"pattern": "^\\d*$",
"maxLength": 16,
"minLength": 16
},
{
"label": "NIN",
"value": "NIN",
"pattern": "^\\d{3}-\\d{4}-\\d{3}$",
"maxLength": 12,
"minLength": 12,
"placeholder": "Enter NIN (XXX-XXXX-XXX)"
},
{
"label": "NID Application Number",
"value": "NID_APPLICATION_NUMBER",
"pattern": "^\\d*$",
"maxLength": 8,
"minLength": 8
},
{
"label": "Official ID of your Country",
"value": "FOREIGN_ID",
"pattern": "^[a-zA-Z0-9]*$",
"maxLength": 10,
"minLength": 5
},
{
"label": "Passport Id",
"value": "PASSPORT_ID",
"pattern": "^[a-zA-Z0-9]*$",
"maxLength": 10,
"minLength": 5
},
{
"label": "UNHCR Proof of registration",
"value": "UNHCR_PROOFOFREGISTRATION",
"pattern": "^\\d*$",
"maxLength": 12,
"minLength": 12
}
],
"firstIdentityValueKey": "husbandDocumentNumber",
"secondIdentityValueKey": "wifeDocumentNumber",
"firstIdentityPlaceholder": "Husband's Details",
"secondIdentityPlaceholder": "Wife's Details",
"firstIdentityDocumentTypeKey": "husbandDocumentType",
"secondIdentityDocumentTypeKey": "wifeDocumentType"
},
"defaultValue": null,
"expressions": {},
"validation": {
"messages": {
"required": "Error message for required input",
"invalidInput": "Error message for invalid input"
}
},
"validators": null,
"wrappers": [
"form-field",
"field-wrapper",
"hidden-field-wrapper",
"hint-field-wrapper",
"irembogov-readonly-wrapper"
]
}
Note: you can add an optional "populateRelativeToRootForm":true property in props to be able to populate fields in different blocks and section. Ensure to specify the full path for the targetKeye.g sectionkey.blockkey.fieldkey
Allowed Custom Properties
Allowed Validations
validator-(n)
invalidInput: When the object value set on the input is invalid
required: when the field is required but the value is undefined