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"/>

无需编写额外代码

表格更改的嫌疑人和主题

2 个答案: