门店小程序怎么注册_详解Angular Forms中自界说ng

详解Angular Forms中自定义ngModel绑定值的方式       在Angular应用中有两种方式来实现表单绑定,但是对于一些特殊的表单控件没法实现,这篇文章主要介绍了详解Angular Forms中自定义ngModel绑定值的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在 Angular 应用中,我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况,但是对于一些特殊的表单控件,例如 input[type=datetime] 、 input[type=file] ,我们需要重写默认的表单绑定方式,让我们绑定的变量不再仅仅只是一个字符串,而是一个 Date 或者 File 对象。为了达成这一目的,essor 。

在我们使用 ngModel 或者 formControl 的时候,这两个 Directive 会向 Angular essor 接口的对象,这是一种典型的面向接口编程的设计。例如,如果我们需要为 input[type=file] 提供一个用来绑定 File essor ,essor 的实现就可以了。不过,我们并不想覆盖其他类型 input essor ,因为那样肯定会对已有代码造成大范围的破坏。所以在这里,我们需要使用 Angular 的分层注入能力——在 ElementInjector essor 。关于 ElementInjector 更多的内容,请看这里 。

下面演示的两个 Directive 您都可以在这里查看 。

首先让我们来创建一个 Directive,这个指令将会选中 input[type=file][appInputFile] 元素,这样我们就可以有选择的为文件选择器的 ElementInjector 定义新的 Provider。

@Directive({
 selector: 'input[type=file][inputFile]', // 1 
 providers: [
 provide: NG_VALUE_ACCESSOR, // 2 
 useExisting: forwardRef(() = InputFileDirective), // 3 
 multi: true // 4 
export class InputFileDirective essor, OnInit, OnDestroy {
 // 当文件选择器选择的文件发生改变时调用的回调函数
 onChange: (any) = any;
 // 当文件选择器选择的被操作后调用的回调函数
 onTouched: () = any;
 // 监听宿主元素的 change 事件
 @HostListener('change', ['$event.target.files']) onElChange = (files: FileList) = {
 this.onChange(files);
 // 监听宿主元素的 blur 事件
 @HostListener('blur', []) onElTouched = () = {
 this.onTouched();
 constructor(private el: ElementRef HTMLInputElement ) { // 5 
 ngOnInit(): void {
 this.el.nativeElement.addEventListener('change', this.listener);
 // essor 接口,用来设置元素的值
 writeValue(obj: any): void {
 this.el.nativeElement.value = obj;
 // essor 接口,用来将一个函数注册为 onChange 回调函数
 registerOnChange(fn: any): void {
 this.onChange = fn;
 // essor 接口,用来将一个函数注册为 onTouched 回调函数
 registerOnTouched(fn: any): void {
 this.onTouched = fn;
 // essor 接口,设置表单元素是否启用
 setDisabledState (isDisabled: boolean): void {
 this.el.nativeElement.disabled = isDisabled;
}

上面的代码片段中你可以看到有几处类似 // 1 的注释,这是我用来在下面的文章中引用该行代码的标记,语法借鉴自 ASCIIDoc

通过定义一个复合的选择器,我们可以有选择的对 input[type=file] essor essor 的注入 token 是一个常量 —— NG_VALUE_ACCESSOR 由于 Directive 的定义在这行代码的下面,所以需要使用 forwardRef 来引用这个依赖的实现。 这里需要将 multiple 设置为 true,因为 Angular essor 就是提供了多个实现的。在解析依赖的时候,Angular 会优先选择我们自定义的实现。 为了代码更加简单,我在这里选择了不利于服务端渲染的 ElementRef.nativeElement 来读取原生 HTML 元素的属性,如果你对服务端渲染有需求,你应该使用 Renderer2 来读写元素的属性。

有了这个 Directive,我们就可以在 Angular Forms 中绑定 File 对象了:

 input type="file" [(ngModel)]="foo.files" inputFile / 

Date 类型的数据也是日常开发中比较头疼的一个地方,因为在 JSON 中, Date 类型往往会被序列化为字符串,而在前端代码中,我们又需要将其反序列化为 Date 对象,最终在页面上展示的时候,我们又需要按照产品需求再将其序列化为制定格式的字符串。现在,essor 的帮助,我们就可以实现让 input[type=datetime] 与 Date 对象进行双向绑定的功能,同时还能够定制 Date 对象在输入框中的显示格式。

@Directive({
 // tslint:disable-next-line:directive-selector
 selector: 'input[type=datetime][valueAsDate]',
 providers: [
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() = DateValueDirective),
 multi: true
export class DateValueDirective essor {
 * See v2.0.0-alpha.25/docs/format
 * 自定义日期展示格式
 * @type {string}
 * @memberof DateValueDirective
 // tslint:disable-next-line:no-input-rename
 @Input('valueAsDate') format: string;
 private dateValue: Date;
 @HostListener('input', ['$event.target.value']) onChange = (_: any) = { };
 @HostListener('blur', []) onTouched = () = { };
 get element() { return this.elementRef.nativeElement; }
 constructor(
 private elementRef: ElementRef,
 private renderer: Renderer2 // 1 
 ) { }
 parseDate(str: string) {
 return parseDate(str, this.format, new Date(), { awareOfUnicodeTokens: true });
 formatDate(date: Date) {
 return formatDate(date, this.format, { awareOfUnicodeTokens: true });
 * 设置组件的值的时候,先把新的值存到一个成员变量中,然后再把新的值格式化为 string
 writeValue(date: Date): void {
 this.dateValue = date;
 this.renderer.setProperty(this.element, 'value', this.formatDate(date));
 * 在 input 元素值发生变化的时候,先尝试把变化后的值转换成 Date 对象
 * 如果转换失败,那么依然使用之前的值
 * 否则,将新的值传递给回调函数
 registerOnChange(fn: any): void {
 const onChange = (value: string) = {
 const date = this.parseDate(value);
 if (isValidDate(date)) {
 this.dateValue = date;
 fn(date);
 } else {
 fn(this.dateValue);
 this.onChange = onChange;
 registerOnTouched(fn: any): void {
 this.onTouched = fn;
 setDisabledState (isDisabled: boolean): void {
 this.renderer.setProperty(this.element, 'disabled', isDisabled);
}

这里演示了使用 Renderer2 来读写元素属性的操作

整个指令的内容仍然非常简单,但是却能够为我们的日常开发带来不小的便利,使用了这个指令后,我们就可以非常容易的为 Date 对象进行双向绑定。

 input type="datetime" valueAsDate="M/d/yyyy h:mm:ss a" [(ngModel)]="foo.date" 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://mfjwzr.com/ganhuo/3057.html