From 156303b3b5f1f95a3b5d37db28b3ce1dcaf59735 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Tue, 8 Nov 2022 15:20:10 +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=EF=BC=8C=E4=BD=BF=E7=94=A8patchValue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html | 12 +++++++++++-
 src/app/app.component.ts   | 33 +++++++++++++++------------------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 736fd11..45bca65 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,11 @@
-查詢條件:<input type="text" [formControl]="condition"/>
+<div [formGroup]="form">
+  <div>工作事項:<input type="text" formControlName="subject" /></div>
+  <div>工作內容:<input type="text" formControlName="content" /></div>
+  <div>
+    <button type="button" (click) = "onReset()">Reset</button>
+    <button type="button" (click) = "onSetValue()">Set Value</button>
+    <button type="button" (click) = "onPatchValue()">Patch Value</button>
+  </div>
+</div>
+<pre>{{form.value |json}}</pre>
+<pre>{{form.dirty |json}}</pre>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4b71ef0..38532ac 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -14,24 +14,21 @@ import { debounce, debounceTime, distinctUntilChanged, filter, map } from 'rxjs/
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-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}`),
-      });
-  }
+export class AppComponent {
+
+  constructor(private fb: FormBuilder) { }
+  readonly form = this.fb.group({
+    subject: this.fb.control(''),
+    content: this.fb.control(''),
+  });
 
-  ngOnDestroy():void{
-    this.stop$.next();
-    this.stop$.complete();
+  onSetValue(): void {
+    this.form.setValue({ subject: 'Task A', content: '' });
+  }
+  onPatchValue(): void {
+    this.form.patchValue({subject:'Task A'});
+  }
+  onReset():void{
+    this.form.reset({subject:'', content:''});
   }
 }