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