角度観測可能でFormGroupを購読します

Question

私のフォームフィールドを購読する前に、スペースを " - "に置き換えます。しかし、私は購読に誤りがあります。 エラーTypeError例外：無効なイベントターゲット

import { Component , OnInit } from '@angular/core'; 
import {FormGroup,FormBuilder} from '@angular/forms'; 
import {Observable} from 'rxjs/Rx'; 

@Component({ 
selector: 'app-root', 
template: `<h1>Hello World!</h1> 
      <form [formGroup]="frm1"> 
      <input type="text" formControlName="name" > 
      <input type="text" formControlName="family"> 
      </form> 
      `, 

}) 

export class AppComponent implements OnInit{ 

frm1 : FormGroup; 

constructor(fb:FormBuilder){ 
    this.frm1 = fb.group({ 
     name : [], 
     family: [] 
    });  
} 
ngOnInit(){ 
    var keyup = Observable.fromEvent(this.frm1.get('family').value , "keyup") 
       .map((data:string) => data.replace(' ','-')) 
       .debounceTime(400);    
    keyup.subscribe(x => console.log(x)); 
} 
} 

Answer 1

あなたがこのアプローチを試すことができます。

template: `<h1>Hello World!</h1> 
      <form [formGroup]="frm1"> 
      <input type="text" #nameInput formControlName="name" > 
      <input type="text" #familyInput formControlName="family"> 
      </form> 
      ` 
@ViewChild('nameInput') nameInputRef: ElementRef; 
@ViewChild('familyInput') familyInputRef: ElementRef; 

var keyup = Observable.fromEvent(this.familyInputRef.nativeElement , "keyup") 
       .map((data:string) => data.replace(' ','-')) 
       .debounceTime(400);    
    keyup.subscribe(x => console.log(x)); 

Answer 2

あなたはフォームで使用することができますvalueChangesに加入することにより、入力フィールドの変化、のために見ることができ、 patchValueを使用して新しい値を割り当てます。

したがって、このような何か：

this.frm1.get('family').valueChanges.debounceTime(400).subscribe(value => { 
    this.frm1.get('family').patchValue(value.replace(' ', '-')) 
}) 

を、あなたが行ってもいいです！ :)

DEMO