モデルドリブン/リアクティブフォームでディレクティブの入力値を変更する方法

Question

「TrimDirective」を実装して、入力フィールドから前後の空白を削除します。

私は入力フィールドの値を変更することができましたが、コンポーネントの新しい値は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

は、あなたが作成することができますndは、モデル値を更新するためにangleを指示するために要素上にchangeイベントをトリガーします。

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]);