A NID Widget is a form field designed to capture and validate official identity numbers (e.g., National ID, Passport, Refugee ID, or Foreigner ID). It can fetch user information from an external endpoint and populate related fields automatically.
The Custom ID Input Component allows secure and structured collection of identity information. Key aspects include:
NATIONAL_ID, FOREIGNER_ID, REFUGEE_ID) with built-in validation for format and length.endpointCode, enabling auto-population of related fields such as name or date of birth.usePrefetch.populateRelativeToRootForm, data can be populated in fields outside the current block or section, using full key paths.minimumAge and maximumAge validation relative to a specified date field.Complete JSON Object
{
"key": "InputKey",
"type": "customidinput",
"props": {
"label": "Input Name",
"required": true,
"idType": "NID",
"nidType": "NATIONAL_ID" | "FOREIGNER_ID" | "REFUGEE_ID",
"endpointCode": "NIDAGETIDINFO",
"usePrefetch": false,
"useBaseUrl": true,
"placeholder": "Input Placeholder",
"idLength": 16,
"populateRelativeToRootForm": false,
"populates": [
{
"valueKey": "foreName",
"targetKey": "wifeOtherName"
}
],
"idConditions": {
"ageLimit": {
"key": "dateOfBirth",
"minimumAge": 18,
"maximumAge": 100,
},
},
},
"validation": {
"messages": {
"required": "Error message for required",
"invalidInput": "Error message for invalid input",
"invalidId": "Error message for invalid ID",
"minimumAge": "Minimum age not met",
"maximumAge": "Maximum age exceeded",
}
},
"validators": {
"validation": {
"maximumAge",
"minimumAge",
},
},
}
{
"key": "InputKey",
"type": "customidinput",
"props": {
"label": "Input Name",
"required": true,
"url": "/identity/v1/nid-info-by-username",
"endpointCode": "NIDAGETIDINFO",
"useBaseUrl": true
"placeholder": "Input Placeholder",
"idLength": 16,
"populateRelativeToRootForm": false,
"populates": [
{
"valueKey": "foreName",
"targetKey": "wifeOtherName"
}
],
},
"validation": {
"messages": {
"required": "Error message for required",
"invalidInput": "Error message for invalid input",
"invalidId": "Error message for invalid ID"
}
}
}
Notes:
You can add an optional "populateRelativeToRootForm":true property in props to able to populate fields in different blocks and section. Ensure to specify the full path for the targetKeye.g sectionkey.blockkey.fieldkey
When using usePrefetch to prefill fields (e.g., Surname, DOB, Nationality) for verified users, ensure that for your NID field with a hide expression you use hide rather than hideField. Using hideField leaves the element in the DOM and does not trigger the mounting/destroying cycle needed for the privacy call to fetch the required data.
To allow searching an application using the national ID or passport number, you should give your field these keys:
National ID Field => nationalIdFieldKey
Refugee ID Field => refugeeIdFieldKey
Foreign ID Field => foreignIdFieldKey
Passport Number Field => passportNumberFieldKey
Allowed Custom Properties
Allowed Validations
validator-(n)
When populateRelativeToRootForm is false or undefined, the input tries to populate fields only within the same block. In this case the poplates array items need to just speify the value and target where by the target`` is the target field’s key. When ``populateRelativeToRootForm`` is true, the input tries to populate any field (in any section or block) relative to the root form of the formly form. In this case the target values in thepopulatesarray items need to be the key path from the root from n the form of: .{ BlockKey }.{ TargetFieldKey }` .
This must be the same for all target keys. e.g.
{
valueKey: 'forename',
targetKey: 'Applicantdetailsj9zdW.block7KUKUYY.father',
relativeToRoot: true,
}