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

Question

我想实现一个"TrimDirective",它使用Angular 2 RC 5和模型驱动/反应形式从输入字段中删除前导和尾随空格.

我设法更改输入字段的值,但是我没有在组件中获得新值myForm.valueChanges().

请参阅此plunker: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);
    }
}

Answer 1

您可以在元素上创建并触发更改事件，以告诉 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]);