表單值的存取監控

使用debounceTime(500)，每500毫秒檢查一次

src/app/app.component.html

@@ -1,14 +1 @@
-<div [formGroup]="form">
-  <div>
-    帳號：<input type="text" formControlName="id" />
-    <ng-container *ngIf="id.touched">
-      <span *ngIf="id.hasError('shouldBeExists')">帳號不存在</span>
-    </ng-container>
-  </div>
-  <div>密碼：<input type="password" formControlName="password" /></div>
-  <div>
-    <button type="button">重設</button>
-    <button type="button">登入</button>
-  </div>
-</div>
-<pre>{{ form.value | json }}</pre>
+查詢條件:<input type="text" [formControl]="condition"/>

src/app/app.component.ts

@@ -1,48 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   FormBuilder,
   FormControl,
   ValidationErrors,
 } from '@angular/forms';
-import { Observable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, of, Subject, takeUntil } from 'rxjs';
+import { debounce, debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
-import { UserService } from './user.service';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
-  readonly form = this.fb.group({
-    id: this.fb.control('', {
-      asyncValidators: [this.shouldBeExists],
-      updateOn: 'blur',
-    }),
-    password: this.fb.control(''),
-  });
-
-  get id(): FormControl {
-    return this.form.get('id') as FormControl;
+export class AppComponent implements OnInit, OnDestroy {
+  readonly condition = new FormControl();
+  readonly stop$=new Subject<void>();
+  ngOnInit():void{
+    this.condition.valueChanges
+    .pipe(
+      debounceTime(500),
+      filter((condition:string)=> !!condition),
+      distinctUntilChanged(),
+      takeUntil(this.stop$)
+      )
+      .subscribe({
+        next:(condition) =>console.log(`查詢條件:${condition}`),
+      });
   }
 
-  constructor(private fb: FormBuilder, private userSerivce: UserService) {}
-
-  shouldBeExists(
-    control: AbstractControl
-  ): Observable<ValidationErrors | null> {
-    if (
-      control.value === undefined ||
-      control.value === null ||
-      control.value === ''
-    ) {
-      return of(null);
-    }
-
-    return this.userSerivce
-      .isExists(control.value)
-      .pipe(map((isExists) => (isExists ? null : { shouldBeExists: true })));
+  ngOnDestroy():void{
+    this.stop$.next();
+    this.stop$.complete();
   }
 }

src/app/user.service.ts

@@ -1,19 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { map, Observable, tap } from 'rxjs';
-
-import { User } from './user';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UserService {
-  constructor(private httpClient: HttpClient) {}
-
-  isExists(id: string): Observable<boolean> {
-    return this.httpClient.get<User[]>('assets/data/user.json').pipe(
-      map((users) => !!users.find((user) => user.id === id)),
-      tap((user) => console.log(user))
-    );
-  }
-}

src/app/user.ts

@@ -1,4 +0,0 @@
-export class User {
-  id!:string;
-  password!:string;
-}