Angular6 + My97DatePicker时间选择器实现数据双向绑定

在angular6中使用MyDatePicker97的时候直接使用ngModel或者form表单的formControlName不能直接获取到值；此时必须进行数据绑定，这里采用的是指令的形式将数据绑定到ngModel或者formControlName上

话不多说，直接干！！！

首先定义一个ts文件，名字叫input-date.directive.ts指令文件注释写的很详细，可以对照注释里面的例子在html中使用

import {Directive,ElementRef,} from '@angular/core';import { downgradeComponent } from '@angular/upgrade/static';import { NgControl, NgModel } from '@angular/forms';@Directive({selector: 'input[date-picker]',providers:[NgModel], // 如果报 no providers for NgModel, 加这一行host: {'(blur)': 'onBlur()',},inputs: ['isNgModel'],}
)
// 我相信看到都很清楚吧这里，注释写的很详细
/*** @module * @desc 获取时间指令：在angular6的时候使用formControlName和ngModel不能够获取到选择的时间，需要添加指令对formControlName和ngModel进行赋值* @param {string} ['date-picker'] - 添加date-picker表示使用此指令* @param {string} ['formControlName'] - 使用formControlName进行时间获取 不能和ngModel共存* @param {string} ['ngModel'] - 使用ngModel进行时间获取 不能和formControlName共存* @param {boolean} ['isNgModel'] - 使用isNgModel进行判断是通过formControlName获取value还是通过ngModel获取** @example* <input datepicker type="text"* class="form-control register-start-time" autocomplete="off"* id="startTime" name="startTime"* οnfοcus="WdatePicker1({dateFmt: 'yyyy-MM-dd', readOnly:true})"* οnclick="WdatePicker1({dateFmt: 'yyyy-MM-dd', readOnly:true})"* οnchange=""* date-picker* [isNgModel]="false"* formControlName="startTime" placeholder="起始时间">
*/
export class DatePickerDirective {isNgModel:boolean = false;constructor(private el: ElementRef, public ngControl: NgControl, public ngModel: NgModel) {}ngAfterViewInit() {}// 此处判断了是ngModel还是formControlName来获取值onBlur() {if (this.isNgModel) {this.ngModel.viewToModelUpdate(this.el.nativeElement.value); // 如果用ngModel，可以直接用viewToModelUpdate} else if (!this.isNgModel) {this.ngControl.control.patchValue(this.el.nativeElement.value)}}
}
// 此处是为了兼容angular1的项目才这样子写的，可以忽略function allowAttribute(componentFactory) {const wrapper = function ($compile, $injector, $parse) {const component = componentFactory($compile, $injector, $parse);component.restrict = "A";return component;};wrapper.$inject = ["$compile", "$injector", "$parse"];return wrapper;}angular.module('admin').directive('ngxCilDatePickerDirective',allowAttribute(downgradeComponent({ component: DatePickerDirective }) as angular.IDirectiveFactory));

然后将input-date.directive.ts绑定在module上
新建一个directive.module.ts文件

import { FormsModule } from '@angular/forms';
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { UseCaseDirective } from './usecase.directive';
import {InputLenDirective} from './input-length.directive';
import { DatePickerDirective } from './input-date.directive' // 指令@NgModule({imports: [CommonModule,FormsModule],exports: [UseCaseDirective,InputLenDirective,DatePickerDirective, // 指令],declarations: [UseCaseDirective,InputLenDirective,DatePickerDirective, // 指令],providers: [],entryComponents: [UseCaseDirective,InputLenDirective,]
})
class NgxDirectivesModule { }export { NgxDirectivesModule };

Angular6 + My97DatePicker时间选择器实现数据双向绑定相关推荐

EngJS(超轻量) 中数据双向绑定如何使用
Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系和事件关系两种 . 前者操作数据时 ,后者触发事件时. 下面简单的介绍Eng 中的 w ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue数据双向绑定的原理
vue数据双向绑定的原理一复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...
Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
目录一. 模板语法插值语法二. 指令 2.1 文本指令 v-html:让HTML渲染成页面 v-text:标签内容显示js变量对应的值 v-show:显示/隐藏内容 v-if:显示/删除内容 2 ...
双向绑定当obj的值修改时_JavaScript进阶之深入理解数据双向绑定
前言谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
数据双向绑定_手把手教你用JavaScript如何实现数据双向绑定
近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为 ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

Angular6 + My97DatePicker时间选择器实现数据双向绑定

Angular6 + My97DatePicker时间选择器实现数据双向绑定

话不多说，直接干！！！

Angular6 + My97DatePicker时间选择器实现数据双向绑定相关推荐

最新文章

热门文章