javascript – 如何使用模型驱动/反应形式修改指令中的输入值

我想实现一个“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]);

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。