zoukankan      html  css  js  c++  java
  • [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor

    If you're coming from AngularJS (v1.x) you probably remember the ng-true-value and ng-false-value directive which allowed to map custom boolean values like "yes" or "no" or whatever other value you had, onto your HTML form. In this lesson we're going to implement our own trueFalseValue directive for Angular, by directly hooking into Angular's form API. A nice occasion to learn about the ControlValueAccessor interface.

    import { Directive, Input, ElementRef, Renderer2, HostListener, forwardRef } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
    
    @Directive({
      selector: 'input[type=checkbox][trueFalseValue]',
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => TrueFalseValueDirective),
          multi: true
        }
      ]
    })
    export class TrueFalseValueDirective implements ControlValueAccessor {
      @Input() trueValue = true;
      @Input() falseValue = false;
      private propagateChange = (_: any) => { };
    
      constructor(private elementRef: ElementRef, private renderer: Renderer2) {
      }
    
      @HostListener('change', ['$event'])
      onHostChange(ev) {
        this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
      }
    
      writeValue(obj: any): void {
        // model -> view
        if (obj === this.trueValue) {
          // this.elementRef.nativeElement.checked = true;
          this.renderer.setProperty(this.elementRef.nativeElement, 'checked', true);
        } else {
          this.renderer.setProperty(this.elementRef.nativeElement, 'checked', false);
        }
      }
      registerOnChange(fn: any): void {
        this.propagateChange = fn;
      }
      registerOnTouched(fn: any): void {
      }
      setDisabledState?(isDisabled: boolean): void {
      }
    }

    How to use:

          <input type="checkbox" formControlName="lovingAngular"
            trueFalseValue
            trueValue="yes" falseValue="nope"
            > loving Angular?
  • 相关阅读:
    新概念英语第三册21-40课(转)
    多线程---线程通信
    多线程----线程同步
    多线程----线程创建的四种方式
    从0开始整合SSM框架-1.mybatis
    easyUI datagrid 动态绑定列名称
    java分享第五天(数组)
    java分享第四天(循环)
    java分享第三天(异常)
    java分享第二天(变量及命名规范)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8408499.html
Copyright © 2011-2022 走看看