観測可能な角型

Question

エラー：スクリプト上で無効なイベントターゲットがありました。以前は@ViewChildで問題なく使用しましたが、FormGroupを使用しようとするとエラーが発生しました!!

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" #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

Observable.fromEventの最初のパラメータは、のHTMLElement（オブジェクト）ではなく、その値（文字列）である必要があります。

FormControlは既にvalueChangesというEventEmmitterを提供しているので、手動で観測可能なものを作成する必要はありません。したがって、次のようなことをするだけで済みます：

ngOnInit() { 
    var keyup = this.frm1.get('family').valueChanges 
      .map((data:string) => data.replace(' ','-')) 
      .debounceTime(400);    
    keyup.subscribe(x => console.log(x)); 
}