2017-06-21 83 views
1

我得到错误:我的脚本无效的事件目标我之前用@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)); 
} 
} 

回答

2

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)); 
} 
+0

我这样做之前删除值,并得到错误:类型的参数“AbstractControl”是不能分配给类型的参数“EventTargetLike”。 类型'AbstractControl'不可用于键入'HTMLCollection'。 'AbstractControl'类型中缺少属性'namedItem'。 –

+0

其实我不会这样做。你可以通过局部变量引用来获得HTMLFormElement,但最好使用'valueChanges'。检查我更新的答案。简单得多。 – dfsq

+0

我这样做是因为你写了,但现在我得到了新的错误:this.frm1.get(...)。valueChanges.map不是函数 –