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:''});
   }
 }