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?

[Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor的更多相关文章

  1. 不知道张(zhāng)雱(pāng)是谁?你out了!

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  2. 在angular项目中使用web-component ----How to use Web Components with Angular

    原文: https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8 ------------- ...

  3. Angular 2.0 从0到1:Rx--隐藏在Angular 2.x中利剑

    第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...

  4. request.getSession(true)和request.getSession(false)的区别

    request.getSession(true)和request.getSession(false)的区别   request.getSession(true):若存在会话则返回该会话,否则新建一个会 ...

  5. JS规则 较量较量(比较操作符) 两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)。【>; <; >=; <=; !=;==】

    较量较量(比较操作符) 我们先来做道数学题,数学考试成绩中,小明考了90分,小红考了95分,问谁考的分数高? 答: 因为"95 > 90",所以小红考试成绩高. 其中大于号& ...

  6. python练习:编写一个函数isIn,接受两个字符串作为参数,如果一个字符串是另一个字符串的一部分,返回True,否则返回False。

    python练习:编写一个函数isIn,接受两个字符串作为参数,如果一个字符串是另一个字符串的一部分,返回True,否则返回False. 重难点:定义函数的方法.使用str类型的find()函数,可以 ...

  7. python中1 is True 的结果为False,is判断与==判断的区别

    python中1 is True 的结果为False,而1 == True的结果为True. python中True的数值就是1,那为什么1 is True 的结果为False呢? 因为is判断和== ...

  8. ng build --aot 与 ng build --prod

    angluar的编译有以下几种方式: ng build  常规的压缩操作    代码体积最大 ng build --aot   angular预编译      代码体积较小 ng build --pr ...

  9. [Angular] Create custom validators for formControl and formGroup

    Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we ...

随机推荐

  1. jquery 将函数作为参数传递

    等待执行函数 这是自己封装的layui的询问框 //------[询问框](parameter:执行函数的参数,f_name:执行函数,msg:提示,time:自动消失时间,btn_arr:按钮组,o ...

  2. 【BZOJ 1266】 [AHOI2006]上学路线route

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 第一问是个最短路. 第二问. 利用第一问floyd算出来的任意两点之间的最短路. 那么枚举每一条边(x,y) 如果w[1][x]+c ...

  3. ubuntu 14.04服务器上使用nginx搭建wordpress博客详解

    过程详解 1.更新apt-get sudo apt-get update 2.安装nginx sudo apt-get install nginx 3.启动nginx sudo service ngi ...

  4. Yii2高速构建RESTful Web服务功能简单介绍

    Yii2相比Yii1而言,一个重大的改进是内置了功能完备的RESTful支持. 其内置RESTful支持提供了例如以下功能: 使用ActiveRecord的通用接口来高速构建原型: 应答格式协商(缺省 ...

  5. Cordova 5 架构学习 Weinre远程调试技术

    手机上的页面不像桌面开发这么方便调试.能够使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装.能够执行: ###npm config set regi ...

  6. yolo源码解析(1):代码逻辑

    一. 整体代码逻辑 yolo中源码分为三个部分,\example,\include,以及\src文件夹下都有源代码存在. 结构如下所示 ├── examples │ ├── darknet.c(主程序 ...

  7. zzulioj--1712--Monty Hall problem(蒙提霍尔问题)

     1721: Monty Hall problem Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 186  Solved: 71 SubmitSt ...

  8. nyoj--528--找球号(三)(位运算&&set)

    找球号(三) 时间限制:2000 ms  |  内存限制:3000 KB 难度:2 描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都是偶数 ...

  9. [HEOI2016/TJOI2016] 排序 解题报告(二分答案/线段树分裂合并+set)

    题目链接: https://www.luogu.org/problemnew/show/P2824 题目描述: 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在 ...

  10. COGS 2479 奇怪的姿势卡♂过去 (bitset+折半)

    思路: 此题显然是CDQ套CDQ套树套树 (然而我懒) 想用一种奇怪的姿势卡过去 就出现了以下解法 5w*5w/8的bitset hiahiahia 但是空间会爆怎么办啊- 折半~ 变成5w*2.5w ...