我想实现一个“TrimDirective”,它使用 Angular 2 RC 5 和模型驱动/ react 形式从输入字段中删除前导和尾随空格。
我设法更改了输入字段的值,但是我没有在 myForm.valueChanges()
的组件中获得新值。
查看这个插件:http://plnkr.co/edit/ruzqCh?p=preview
当指令更改值时,如何触发 formGroup 的更新?
模板:
<form [formGroup]="myForm">
<input formControlName="name" trim>
</form>
latest value: -{{ latestValue }}-
组件:
@Component({
selector: 'my-app',
templateUrl: 'app/app.html'
})
export class AppComponent implements OnInit {
private myForm: FormGroup;
private latestValue: string;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(),
});
this.myForm.valueChanges.subscribe(v => this.latestValue = v.name)
}
}
指令:
@Directive({
selector: '[trim]'
})
export class TrimDirective {
private el: any;
constructor(
el: ElementRef
){
this.el = el.nativeElement;
}
@HostListener('keypress')
onEvent() {
setTimeout(() => { // get new input value in next event loop!
let value: string = this.el.value;
if(value && (value.startsWith(' ') || value.endsWith(' '))) {
console.log('trim!');
this.el.value = value.trim();
}
},0);
}
}
最佳答案
您可以在元素上创建并触发更改事件,以告知 Angular 更新模型值。
let event: Event = document.createEvent("Event");
event.initEvent('input', true, true);
Object.defineProperty(event, 'target', {value: this.elementRef.nativeElement, enumerable: true});
this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'dispatchEvent', [event]);
关于javascript - 如何使用模型驱动/ react 形式修改指令中的输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39103944/