标签：自定义 form min max number formControlName inputValue Input any

效果预览

TS代码

import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
    selector: 'app-number-plus-subtract',
    templateUrl: './number-plus-subtract.component.html',
    styleUrls: ['./number-plus-subtract.component.scss'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        multi: true,
        useExisting: forwardRef(() => NumberPlusSubtractComponent)
    }]
})
export class NumberPlusSubtractComponent implements OnInit, ControlValueAccessor {
    inputValue = 1;                 // 初始值

    @Input() defaultValue: number;  // 默认值
    @Input() min: number;           // 最小值
    @Input() max: number;           // 最大值
    @Input() step: number;          // 递增/递减步数
    @Input() dsiabled: boolean;     // 是否可用

    onChange: any = () => { };
    onTouch: () => void = () => null;

    constructor() {

    }

    // 封装组件搭配form的formControlName 使用
    writeValue(obj: any): void {
        this.inputValue = obj;
    }
    registerOnChange(fn: any): void {
        this.onChange = fn;
    }
    registerOnTouched(fn: any): void {
        this.onTouch = fn;
    }


    countSubtract() {
        if (this.dsiabled) {
            return;
        }
        if ((this.min || this.min === 0) && this.min >= (this.inputValue - this.step)) {
            this.inputValue = this.min;
            return;
        }
        this.inputValue = this.inputValue - this.step;
        this.onChange(this.inputValue);
    }

    countPlus() {
        if (this.dsiabled) {
            return;
        }
        if ((this.max || this.max === 0) && this.max <= (this.inputValue + this.step)) {
            this.inputValue = this.max;
            return;
        }
        this.inputValue += this.step;
        this.onChange(this.inputValue);
    }

    setDefaultInfo() {
        if (this.defaultValue || this.defaultValue === 0) {
            this.inputValue = this.defaultValue;
        }

        if (!this.step) {
            this.step = 1;
        }

        if (this.inputValue < this.min) {
            this.inputValue = this.min;
        }
    }

    ngOnInit() {
        this.setDefaultInfo();
    }

}

关键代码

标签：自定义,form,min,max,number,formControlName,inputValue,Input,any
来源： https://www.cnblogs.com/niluiquhz/p/14915542.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。