#NationalIdentityNumber

#Import

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.NationalIdentityNumber />)

#Description

Field.NationalIdentityNumber is a wrapper component for the input of strings, with user experience tailored for national identity number values.

This field is meant for Norwegian national identity numbers(fnr) and D numbers, and therefor takes a 11-digit string as a value. A Norwegian national identity number can have a leading zero, hence why it's a string and not a number. More info can be found at Skatteetaten

It validates input for Norwegian national identity numbers(fnr) and D numbers using the fnrvalidator. The validation happens on blur, internally using the onBlurValidator property.

There is a corresponding Value.NationalIdentityNumber component.

#Relevant links

• Source code
• Docs code

#Support for different countries

When it comes to supporting different countries, Eufemia Forms may prefer to introduce a new component for each country, simply because the nature of such a component can differ significantly from the original component which was made for Norway in mind.

#Validators

#Internal validators exposed

Field.NationalIdentityNumber expose the following validators through its onChangeValidator and onBlurValidator property:

• dnrValidator: validates a D number.
• fnrValidator: validates a national identity number (fødselsnummer).
• dnrAndFnrValidator:
  • validates the identification number as a D number when first digit is 4 or greater (because a D number has its first number increased by 4).
  • validates the identification number as a national identity number (fødselsnummer) when first digit is 3 or less.

#createMinimumAgeValidator

You can create your own age validator by using the createMinimumAgeValidator function. It takes an age as a parameter and returns a validator function. The validator function takes a value and returns an error message if the value is not above the given age. It validates if the identification number has a date of birth that is 18 years or older. It uses only the 7 first digits of the identification number to validate. The first 6 digits representing the birth of date, and the next digit represents the century. As it only use the 7 first digits, it does not validate the identification number, therefore it's quite common to use this validator together with one of the validators above (dnrValidator, fnrValidator or dnrAndFnrValidator) to validate the identification number as well.

You need to import the createMinimumAgeValidator function from the Field.NationalIdentityNumber component:

import { createMinimumAgeValidator } from '@dnb/eufemia/extensions/forms/Field/NationalIdentityNumber'

// Create a validator that validates if the identification number is above 18 years old
const above18YearsValidator = createMinimumAgeValidator(18)

render(
  <Field.NationalIdentityNumber onBlurValidator={above18YearsValidator} />,
)

See the following example on how to extend validation using the exposed validators.

#createMinimumAgeVerifier

To use the createMinimumAgeValidator functionality without a field, you can use createMinimumAgeVerifier, which returns a boolean.

import { createMinimumAgeVerifier } from '@dnb/eufemia/extensions/forms/Field/NationalIdentityNumber'

const isAdult = createMinimumAgeVerifier(18)

isAdult('123') // false
isAdult('10072476609') // false
isAdult('09100654021') // true

#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

<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
  value="12345678901"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
/>

#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')
  }
}
const myValidator = (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)
const myAdultValidator = (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)
const myFnrAdultValidator = (value, { validators }) => {
  const { fnrValidator } = validators
  return [fnrValidator, adultValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="49100651997"
    onBlurValidator={myFnrAdultValidator}
    validateInitially
  />,
)