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