From 8b7bc944012b56ccbd943888a392baa0bc55cc37 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Tue, 8 Nov 2022 14:49:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=96=AE=E5=80=BC=E7=9A=84=E5=AD=98?=
 =?UTF-8?q?=E5=8F=96=E7=9B=A3=E6=8E=A7=20=E4=BD=BF=E7=94=A8debounceTime(50?=
 =?UTF-8?q?0)=EF=BC=8C=E6=AF=8F500=E6=AF=AB=E7=A7=92=E6=AA=A2=E6=9F=A5?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html | 15 +----------
 src/app/app.component.ts   | 51 +++++++++++++++-----------------------
 src/app/user.service.ts    | 19 --------------
 src/app/user.ts            |  4 ---
 4 files changed, 21 insertions(+), 68 deletions(-)
 delete mode 100644 src/app/user.service.ts
 delete mode 100644 src/app/user.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9d9e954..736fd11 100644
--- a/src/app/app.component.html
+++ b/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"/>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9e27ab2..4b71ef0 100644
--- a/src/app/app.component.ts
+++ b/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();
   }
 }
diff --git a/src/app/user.service.ts b/src/app/user.service.ts
deleted file mode 100644
index 27d4c9f..0000000
--- a/src/app/user.service.ts
+++ /dev/null
@@ -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))
-    );
-  }
-}
diff --git a/src/app/user.ts b/src/app/user.ts
deleted file mode 100644
index 24bba39..0000000
--- a/src/app/user.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export class User {
-  id!:string;
-  password!:string;
-}