Skip to content
Home

Field.NationalIdentityNumber#

Info
Demos
Properties
Events

Demos#

Empty#

<Field.NationalIdentityNumber
  onChange={(value) => console.log('onChange', value)}
/>

Omit mask#

<Field.NationalIdentityNumber
  onChange={(value) => console.log('onChange', value)}
  omitMask
/>

Placeholder#

<Field.NationalIdentityNumber
  placeholder="Enter 11 digits..."
  onChange={(value) => console.log('onChange', value)}
/>

Label#

<Field.NationalIdentityNumber
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Label and value#

<Field.NationalIdentityNumber
  label="Label text"
  value="01017501234"
  onChange={(value) => console.log('onChange', value)}
/>

With help#

<Field.NationalIdentityNumber
  label="Label text"
  value="01017501234"
  help={{
    title: 'Help is available',
    content: 'The more I help others to succeed, the more I succeed.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Disabled#

<Field.NationalIdentityNumber
  value="01010101010"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Error#

This is what is wrong...
<Field.NationalIdentityNumber
  value="007"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required#

<Field.NationalIdentityNumber
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
  validateInitially
/>

Validation - Norwegian national identity numbers#

It validates Norwegian national identity numbers(fnr) using the fnrvalidator.

Below is an example of the error message displayed when there's an invalid Norwegian national identity number(fnr):

<Field.NationalIdentityNumber value="29020112345" validateInitially />

Validation - D numbers#

It validates D numbers using the fnrvalidator.

Below is an example of the error message displayed when there's an invalid D number(a D number has its first number in the identification number increased by 4):

<Field.NationalIdentityNumber value="69020112345" validateInitially />

Validation function#

You can provide your own validation function, either to onChangeValidator or onBlurValidator.

const fnr = (value: string) =>
  value.length >= 11
    ? {
        status: 'valid',
      }
    : {
        status: 'invalid',
      }
render(
  <Field.NationalIdentityNumber
    required
    value="123"
    onBlurValidator={(value) => {
      const result = fnr(value)
      return result.status === 'invalid'
        ? new FormError('Field.errorPattern')
        : undefined
    }}
    validateInitially
  />
)

Extend validation with custom validation function#

You can extend the existing validations(dnrValidator, fnrValidator, dnrAndFnrValidator, and make your own age validator by using the createMinimumAgeValidator function) with your own validation function.

const bornInAprilValidator = (value: string) => {
  if (value.substring(2, 4) !== '04') {
    return new Error('Not born in April')
  }
}
// Keep the default validator while ensuring birth month is April.
const myValidator: NationalIdentityNumberValidator = (
  value,
  { validators }
) => {
  const { dnrAndFnrValidator } = validators ?? {}
  return [dnrAndFnrValidator, bornInAprilValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="53050129159"
    onBlurValidator={myValidator}
    validateInitially
  />
)

Extend validation with adult validator#

You can extend the existing validations(dnrValidator, fnrValidator, and dnrAndFnrValidator) with your own age validator, by using the createMinimumAgeValidator function.

const adultValidator = createMinimumAgeValidator(18)
// Keep the default validator while adding an age check.
const myAdultValidator: NationalIdentityNumberValidator = (
  value,
  { validators }
) => {
  const { dnrAndFnrValidator } = validators ?? {}
  return [dnrAndFnrValidator, adultValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="56052459244"
    onBlurValidator={myAdultValidator}
    validateInitially
  />
)

Validate only national identity numbers(fnr) above 18 years old#

const adultValidator = createMinimumAgeValidator(18)
// Keep the default validator while ensuring an FNR-based age check.
const myFnrAdultValidator: NationalIdentityNumberValidator = (
  value,
  { validators }
) => {
  const { fnrValidator } = validators ?? {}
  return [fnrValidator, adultValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="49100651997"
    onBlurValidator={myFnrAdultValidator}
    validateInitially
  />
)
Suggest an edit