表单更改的订阅和主题

Question

我正在创建一个表单，其中包含一些我想控制的输入，例如，我有一个电子邮件输入。

我正在创建一个 observable 来检查用户写的是否有电子邮件格式：

//html:
<input matInput type="email" ngModel (ngModelChange)="emailChanged$.next($event)" name="email" required placeholder="EMAIL"/>

//ts:
export class MyComponent implements OnInit {

   emailValid$: Observable<boolean>;
   emailChanged$: Subject<string>;
   subscription: Subscription;


   constructor() {


      this.emailChanged$ = new Subject<string>();

      this.subscription = this.emailChanged$
       .debounceTime(500)
       .map(this.isValidEmail)
       .subscribe(isValid => this.emailValid$ = isValid)

   }

   isValidEmail(email: string): Observable<boolean>{
       return Observable.of(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email));
   }

但是不对，我执行的时候出现这个错误（而且debounceTime过期）

TypeError: Observable_1.Observable.of is not a function
  at MapSubscriber.MyComponent.isValidEmail [as project] (my-component.component.ts:73)
  at MapSubscriber._next (map.js:79)

我该如何解决？

Answer 1

从

导入 of

import { of } 'rxjx/observables/of'

并在没有 Observable 的情况下使用它，只是 of.

isValidEmail(email: string): Observable<boolean>{
    return of(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email));
}

Answer 2

只需使用 pattern 个属性

<input matInput type="email" ngModel pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" name="email" required placeholder="EMAIL"/>

无需编写额外的代码

表单更改的订阅和主题

Suscription and subject for form changes

rxjs

rxjs5

angular

angular5