Angular Observable和訂閱FormGroup

Question

我想在訂閱我的表單字段之前用「 - 」替換空格。但我在訂閱時遇到錯誤。 錯誤類型錯誤：無效的事件目標

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