Question

我想在订阅我的表单字段之前用“ - ”替换空格。但我订阅时出错了。 ERROR 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

您可以订阅可以与表单一起使用的valueChanges来查看输入字段中的更改，然后使用patchValue分配新值。

所以做这样的事情：

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

你很高兴去！：）

<强> DEMO

Answer 2

您可以尝试这种方法：

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));

Angular Observable并使用FormGroup订阅

2 个答案: