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

    关键代码


  • 相关阅读:
    WCF-配置
    乡下人生活录——程序员给自己买份保险吧
    Sqlserver表分区
    Oracle通过Navicat导入表数据与机构,数据无法直接查询,需要加双引号的问题
    19.Imagetragick 命令执行漏洞(CVE-2016–3714)
    18.phpmyadmin 4.8.1 远程文件包含漏洞(CVE-2018-12613)
    17.[CVE-2017-12615]Tomcat任意文件上传漏洞
    16.Tomcat弱口令 && 后台getshell漏洞
    15.Nginx 解析漏洞复现
    14.Nginx 文件名逻辑漏洞(CVE-2013-4547)
  • 原文地址:https://www.cnblogs.com/niluiquhz/p/14915542.html
Copyright © 2011-2022 走看看