#BankAccountNumber

#Import

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

#Description

Field.BankAccountNumber is a wrapper component for the input of strings, with user experience tailored for bank account values.

This field is meant for Norwegian bank account numbers, and therefore takes a 11-digit string as a value. A Norwegian bank account number can have a leading zero, which is why this value is a string and not a number. In addition, we validate 0000 00 00000 as invalid. More info can be found at Wikipedia.

There is a corresponding Value.BankAccountNumber component.

#Relevant links

• Source code
• Docs code

#Validators

#Internal validators exposed

Field.BankAccountNumber expose the bankAccountNumberValidator validator through its onChangeValidator and onBlurValidator property, take a look at this demo. The bankAccountNumberValidator validator, validates if the bank account number provided is a Norwegian bank account number or not.

#Extending validators

Use the validators parameter to keep the default checks and add your own custom rule. Import BankAccountNumberValidator to type your onBlurValidator and get the typed validators object.

import { Field } from '@dnb/eufemia/extensions/forms'
import type { BankAccountNumberValidator } from '@dnb/eufemia/extensions/forms/Field/BankAccountNumber'

const myValidator: BankAccountNumberValidator = (
  value,
  { validators },
) => {
  const { bankAccountNumberValidator } = validators ?? {}
  const prefixChecker = (value: string) => {
    if (value && value[0] !== '1') {
      return new Error('Account number must start with 1')
    }
  }

  // Keep the built-in validator and add a custom prefix rule.
  return [bankAccountNumberValidator, prefixChecker]
}

render(<Field.BankAccountNumber onBlurValidator={myValidator} />)