A ** NIN Widget Component** is a specialized input field for capturing and validating National Identification Numbers (NIN). It supports fetching user details from a dedicated API endpoint and can automatically populate related fields within a form.
The Custom NIN Input Component is used to securely collect NINs and associated user information. Key features include:
/identity/v1/nin-info-by-username) and populate other form fields automatically.populateRelativeToRootForm is enabled.foreName or other personal data based on the fetched response.Complete JSON Object
{
"key": "InputKey",
"type": "customidinput",
"props": {
"label": "Input Name",
"required": true,
"url": "/identity/v1/nin-info-by-username",
"useBaseUrl": true
"placeholder": "Input Placeholder",
"idLength": 10,
"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"
}
}
}
Allowed Custom Properties
Allowed Validations
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 thepoplatesarray 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,
}