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

我不是女神ヾ 2022-01-09 23:47 326阅读 0赞

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

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

### 话不多说，直接干！！！ ###

1.  首先定义一个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 };

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式

场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

系统管理员/ 2023年10月07日 13:31/ 0 赞/ 11 阅读

相关 My97DatePicker日期范围限制

[My97DatePicker日期范围限制][My97DatePicker] 1.动态时间范围限制：可以通过系统给出的动态变量，如%y(当前年)，%M(当

我会带着你远行/ 2022年08月21日 01:19/ 0 赞/ 276 阅读

相关关于My97datePicker时间控件

My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 1、下载My97DatePicker组件包下载地址：[http://download.c

青旅半醒/ 2022年08月07日 03:38/ 0 赞/ 252 阅读

相关 My97DatePicker时间控件

My97DatePicker 是一款非常灵活好用的日期控件，使用也非常简单先简单谈谈其使用方法，后续会根据业务的需求慢慢完善导入相关的第三方

青旅半醒/ 2022年07月31日 09:56/ 0 赞/ 281 阅读

相关 Angular4的双向数据绑定

最近在学angular4，因为angularjs中默认是双向数据绑定，但是如果在比较复杂的页面使用的话会引起性能问题，那是因为angularjs会在页面保存一个所有数据绑定的列

深碍√TFBOYSˉ_/ 2022年06月05日 06:54/ 0 赞/ 237 阅读

相关 My97DatePicker时间控件的使用

文章转自与：https://www.cnblogs.com/sharpest/p/6082770.html [My97DatePicker基本用法][My97DateP

梦里梦外;/ 2022年05月30日 02:26/ 0 赞/ 257 阅读

相关 angular 双向绑定

Can't bind to 'ngModel' since it isn't a known property of 'input'. 原因:库未引用完整解决:

古城微笑少年丶/ 2022年05月20日 06:45/ 0 赞/ 280 阅读

相关 My97DatePicker关闭时间选择器

js中编写：$dp.hide(); 即可参照网址：[https://bbs.csdn.net/wap/topics/380022397][https_bbs.csdn

分手后的思念是犯贱/ 2022年04月10日 06:57/ 0 赞/ 293 阅读

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

Angular6 + My97DatePicker时间选择器实现数据双向绑定 > 在angular6中使用MyDatePicker97的时候直接使用ngModel或者fo

我不是女神ヾ/ 2022年01月09日 23:47/ 0 赞/ 327 阅读

相关 angular6表单提交和双向数据绑定

angular6的表单数据提交是通过ngForm进行提交的，通过ngModel进行数据的双向绑定，具体代码如下： html代码： <form action=""

╰+攻爆jí腚メ/ 2022年01月06日 11:55/ 0 赞/ 272 阅读