Angular:来自指令的 updateValueAndValidity [英] Angular: updateValueAndValidity from directive
问题描述
我有一个附加小数的指令,如果输入值是一个整数,则模糊.下面是实现.
I have a directive that appends decimals, if the input value is a whole number, on blur. Below is the implementation.
import { Directive, ElementRef, Input, OnInit, HostListener, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Directive({
selector: '[price]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PriceDirective),
multi: true
}
]
})
export class PriceDirective implements ControlValueAccessor {
constructor(private el: ElementRef) { }
// ControlValueAccessor interface
private _onChange = (_) => { };
private _onTouched = () => { };
@HostListener('blur', ['$event'])
input(event) {
!!event.target.value ? $(this.el.nativeElement).val(Number(event.target.value).toFixed(2)) : $(this.el.nativeElement).val(null);
this._onChange(parseFloat(event.target.value));
this._onTouched();
}
writeValue(value: any): void {
!!value ? $(this.el.nativeElement).val(Number(value).toFixed(2)) : $(this.el.nativeElement).val(null);
}
registerOnChange(fn: (_: any) => void): void { this._onChange = fn; }
registerOnTouched(fn: any): void { this._onTouched = fn; }
}
事情按预期进行.
但是,由于以编程方式更改值时 Angular 不会触发验证,因此不会验证具有此指令的文本框.
But, since Angular doesn't trigger validation when the value is changed programatically, the textbox that has this directive, is not validated.
在这种情况下,我如何启用验证,除了将 control
引用作为指令的输入传递并在其上调用 updateValueAndValidity
或调用 input
或 blur
上的 >updateValueAndValidity.
How can I enable validation in this case, by other means than passing the control
reference as an input to the directive and calling updateValueAndValidity
on it, or calling updateValueAndValidity
on input
or blur
.
如果有人建议我一种从指令本身触发验证的方法,那就太好了.
It would be great if someone suggests me a way to trigger validation from the directive itself.
推荐答案
我就是用这种方式解决了同样的问题.这是我的第一种方法.
I solved the same problem in this way. It is my first approach.
update() {
// ...
const el = this.el.nativeElement;
const reg = new RegExp(this.textMaskConfig.replacement);
el.value = this.prevStr.replace(reg, this.currentChar);
// ...
}
但它不会触发验证事件.所以我得到了 NgControl
组件并使用了 setValue()
方法.
But It doesn't fire the validate event. So I get the NgControl
component and used setValue()
method.
constructor(private el: ElementRef, private ctrl: NgControl) {
}
@HostListener('keydown', ['$event']) onKeyDownHandler(e) {
this.ctrl.control.setValue(value);
}
这篇关于Angular:来自指令的 updateValueAndValidity的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!