import { Component } from '@angular/core';
import { WrInput } from 'ngwr/input';
import { WrValidators } from 'ngwr/validators';
@Component({ imports: [WrInput] })
export class MyComponent {}cvc
Check a card security code: 3 digits, or 4 for Amex.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Live demo — 3 digits (Visa / MC)
Live demo — 4 digits (Amex)
Usage
import { FormControl } from '@angular/forms';
import { WrValidators } from 'ngwr/validators';
const cvc = new FormControl('', [WrValidators.cvc()]); // 3 digits
const amex = new FormControl('', [WrValidators.cvc(4)]); // 4 digitsAPI
| Name | Description | Type | Default |
|---|---|---|---|
signature | Call it with the digit count. | (length?: number) => ValidatorFn | — |
length | Exact digit count: 3, or 4 for Amex. | number | 3 |
error key | On failure: { cvc: { length } }, the count it wanted. Empty value passes. | { cvc: { length: number } } | — |