Overview
tng-number-input is a standalone number input that implements ControlValueAccessor for Angular forms. It supports min, max, step, optional clamping on blur, and Tailng’s klass-based theming.
Quick example
Basic
<form [formGroup]="form">
<tng-number-input
formControlName="quantity"
placeholder="Quantity"
[min]="0"
[max]="100"
[step]="1"
/>
</form>
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TngNumberInput } from '@tailng-ui/ui/form';
@Component({
selector: 'number-input-demo',
standalone: true,
imports: [ReactiveFormsModule, TngNumberInput],
template: `<form [formGroup]="form">
<tng-number-input formControlName="quantity" placeholder="Quantity"
[min]="0" [max]="100" [step]="1" />
</form>`,
})
export class NumberInputDemoComponent {
form = new FormGroup({
quantity: new FormControl<number | null>(10, { nonNullable: false }),
});
}
Works with formControlName; value is number | null.
Decimal step
<form [formGroup]="form">
<tng-number-input
formControlName="amount"
placeholder="Amount (0–1000, step 0.01)"
[min]="0"
[max]="1000"
[step]="0.01"
klass="border-2 border-primary rounded-lg"
/>
</form>
form = new FormGroup({
amount: new FormControl<number | null>(null, { nonNullable: false }),
});
// min/max clamp on blur; step affects browser stepper and validation.
Use [step]="0.01" for decimals; value is clamped to min/max on blur.
Features
min / max / step
Native HTML attributes for validation and browser stepper. Optional clamping to min/max on blur.
Value: number | null
Empty input yields null; otherwise a number. NaN is converted to null.
Klass theming
Customize the input via klass input.
Forms-ready
Full ControlValueAccessor integration for reactive and template-driven forms.
Tip: Use inputmode="numeric" or inputmode="decimal" for better mobile keypad behavior.