ui/src/form/fields/NumberInputField.component.ts

import {TextInputFieldComponent} from './TextInputField.component.js'
import {Attribute, Component} from '../../decorators.js'

@Component('ex-input-number')
export class NumberInputFieldComponent extends TextInputFieldComponent {
    protected static html = `
        <label>
            <span class="label"></span>
            <input class="input" type="number">
            <small class="error"></small>
        </label>
    `

    @Attribute()
    public max?: number

    @Attribute()
    public min?: number

    @Attribute()
    public step?: number

    render() {
        super.render()

        const max = (!this.max && this.max !== 0) ? '' : String(this.max)
        this.inputEl.setAttribute('max', max)

        const min = (!this.min && this.min !== 0) ? '' : String(this.min)
        this.inputEl.setAttribute('min', min)

        const step = (!this.step && this.step !== 0) ? '' : String(this.step)
        this.inputEl.setAttribute('step', step)
    }

    validate(): boolean {
        if ( !super.validate() ) {
            return false
        }

        const num = this.getValue()
        if ( isNaN(num) ) {
            this.error = 'Value must be a number'
            return false
        }

        if ( (this.max || this.max === 0) && num > this.max ) {
            this.error = `Value must be at most ${this.max}`
            return false
        }

        if ( (this.min || this.min === 0) && num < this.min ) {
            this.error = `Value must be at least ${this.min}`
            return false
        }

        if ( this.step && num % this.step !== 0 ) {
            this.error = `Value must be a multiple of ${this.step}`
            return false
        }

        return true
    }

    getValue(): number {
        return parseFloat(super.getValue())
    }
}