我想实现一个“TrimDirective”,它使用Angular 2 RC 5和模型驱动/反应形式从输入字段中删除前导和尾随空格.
我设法更改输入字段的值,但是我没有在myForm.valueChanges()中的组件中获得新值.
看到这个plunker：http://plnkr.co/edit/ruzqCh?p=preview
当指令更改值时,如何触发formGroup的更新？
模板：
零件：
@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]);
