我们想在一个相当大的angular2项目中 .trim() 所有输入 . 我们所有的表单都是基于模板的非ReactiveForms . 由于我不想重构我们所拥有的每一项输入，我认为指令将是最佳选择 .
此外，各种组件附加 (input) 或 (change) 侦听器（例如，作为用户类型的字段中的大写文本） .
我在下面的实现取自this Plunker（由Angular贡献者编写以响应this bug）和this solution（早于Angular2 Final并且在当前状态下不可行） .
使用以下代码，我的组件级方法不再被调用（如上面提到的输入到大写的方法） .
编辑：似乎仍然至少调用了一些组件级 (blur) 方法 .
我想我错过了将执行传递给组件的调用？
我试过了：
-
实现
ControlValueAccessor而不是DefaultValueAccessor.
也许 forwardRef 的东西？
My Trim Directive:
import { Directive, Renderer, ElementRef, forwardRef } from "@angular/core";
import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
const TRIM_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TrimValueAccessor),
multi: true
};
@Directive({
selector: 'input[type=text]',
host: { '(change)': 'trim($event.target.value)' },
providers: [TRIM_VALUE_ACCESSOR]
})
export class TrimValueAccessor implements DefaultValueAccessor {
onChange = (_: any) => {};
onTouched = () => {};
constructor(private renderer: Renderer, private elementRef: ElementRef) {};
trim(value: any): void {
if (value) {
value = value.toString().trim();
this.writeValue(value);
}
this.onChange(value);
};
registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }
registerOnTouched(fn: () => any): void { this.onTouched = fn; }
writeValue(value: any): void {
this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', value);
}
}
这是全局加载的 NgModule[declarations] 条目
1 回答
难道你不知道它：原来在其他地方有一个回归（在我开始这个功能的同时合并）打破了其他功能 .
附注可能与某人有关：
我的最终实施
implements ControlValueAccessor（而不是DefaultValueAccessor）我添加了一个从原始链接的Plunker绑定到
(blur)的this.onTouched();的调用 .