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

最新推荐文章于 2022-01-25 14:10:49 发布

置顶前端毒脚show

最新推荐文章于 2022-01-25 14:10:49 发布

阅读量1.2k

点赞数 3

本文链接：https://blog.csdn.net/weixin_38516688/article/details/93104695

版权

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 };