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?
  • 相关阅读:
    Win10 iot 配置防火墙限制应用部署
    未能加载文件或程序集“********”或它的某一个依赖项。试图加载格式不正确的程序。
    IIS 支持 m3u8
    UWP WebView 禁用缩放
    Code First
    关于 永恒之蓝 和 MS17-010 补丁
    《 罗辑思维 成大事者不纠结》读书笔记
    <王川自选集第一卷电子书 >读书笔记
    <王二的经济学故事>读书笔记
    <以交易为生>读书笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8408499.html
Copyright © 2011-2022 走看看