zoukankan      html  css  js  c++  java
  • angular 自定义组件和form的formControlName 连用

    效果预览


    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();
        }
    
    }
    
    

    关键代码


  • 相关阅读:
    Android ViewPager2 可垂直左右滑动使用【java】
    Android常用优秀开源框架
    Content-Type类型大全
    NodeJs FS 文件系统模块
    Nodejs 包与 npm第三方模块安装和 package.json 以及 cnpm
    Flutter Plugin开发简单示例
    Mysql创建数据库以及用户分配权限
    Android仿微信QQ等实现锁屏消息提醒
    android 桌面图标添加数字角标
    android7/8新特性 画中画、shortcut和分屏模式
  • 原文地址:https://www.cnblogs.com/niluiquhz/p/14915542.html
Copyright © 2011-2022 走看看