From ee4fc5794431e99f0e0ce0bc5fccc6df1f0f5791 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Tue, 8 Nov 2022 17:09:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E8=A8=82=E8=A1=A8=E5=96=AE=E5=85=83?=
 =?UTF-8?q?=E4=BB=B6=20=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86fn=20Task?=
 =?UTF-8?q?=E6=94=B9=E7=82=BAany=EF=BC=8C=E8=A6=8F=E9=81=BFTypeScript?=
 =?UTF-8?q?=E5=BC=B7=E5=9E=8B=E5=88=A5=E5=95=8F=E9=A1=8C=EF=BC=8C=E6=9C=83?=
 =?UTF-8?q?=E5=B0=8E=E8=87=B4=E7=B7=A8=E8=AD=AF=E9=8C=AF=E8=AA=A4=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9task.ts=20=E5=8F=83=E6=95=B8=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=A9=9A=E5=98=86=E8=99=9F=EF=BC=8C=E4=B8=8D=E7=84=B6?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E8=A8=AD=E5=AE=9A=E5=88=9D=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html                 | 18 +-----
 src/app/app.component.ts                   | 44 ++------------
 src/app/app.module.ts                      |  3 +-
 src/app/task-form/task-form.component.css  |  0
 src/app/task-form/task-form.component.html |  4 ++
 src/app/task-form/task-form.component.ts   | 71 ++++++++++++++++++++++
 src/app/task.ts                            |  4 ++
 7 files changed, 89 insertions(+), 55 deletions(-)
 create mode 100644 src/app/task-form/task-form.component.css
 create mode 100644 src/app/task-form/task-form.component.html
 create mode 100644 src/app/task-form/task-form.component.ts
 create mode 100644 src/app/task.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f379fa6..a4d0d69 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,15 +1,3 @@
-<div [formGroup]="form">
-  <div>工作編號：{{ taskSn.value }}</div>
-  <div>
-    工作狀態：
-    <select formControlName="Status">
-      <option value="None">待安排</option>
-      <option value="Doing">進行中</option>
-      <option value="Finish">已完成</option>
-    </select>
-  </div>
-  <div>
-    完成日期：<input type="text" formControlName="FinishDate" />
-    <span *ngIf="finishDate.hasError('required')">完成日期為必填欄位</span>
-  </div>
-</div>
+<app-task-form [formControl] = "formControl"></app-task-form>
+
+<pre>{{formControl.value | json}}</pre>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b8e1237..9fe1927 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,45 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { map } from 'rxjs';
+import { Component, VERSION } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: [ './app.component.css' ]
 })
-export class AppComponent implements OnInit {
-  form: FormGroup = this.fb.group({
-    TaskSn: this.fb.control('0001'),
-     Status: this.fb.control('Finish'),
-     FinishDate: this.fb.control(''),
-  })
-  constructor(private fb: FormBuilder){}
-  get taskSn():FormControl{
-    return this.form.get('TaskSn') as FormControl;
-  }
-  get status(): FormControl{
-    return this.form.get('Status') as FormControl;
-  }
-  get finishDate(): FormControl{
-    return this.form.get('FinishDate') as FormControl;
-  }
-  ngOnInit(): void {
-    this.status.valueChanges
-    .pipe(map((status) => status ==='Finish'))
-    .subscribe({
-      next:(isFinish) =>{
-        if(isFinish){
-          this.finishDate.addValidators(Validators.required);
-        }else{
-          this.finishDate.removeValidators(Validators.required);
-        }
-        this.finishDate.updateValueAndValidity();
-      },
-    })
-  }
+export class AppComponent{
+  readonly formControl= new FormControl();
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4d3e444..6e7fba9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,10 +4,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
+import { TaskFormComponent } from './task-form/task-form.component';
 
 @NgModule({
   imports:      [ BrowserModule, ReactiveFormsModule, HttpClientModule ],
-  declarations: [ AppComponent ],
+  declarations: [ AppComponent, TaskFormComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }
diff --git a/src/app/task-form/task-form.component.css b/src/app/task-form/task-form.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/task-form/task-form.component.html b/src/app/task-form/task-form.component.html
new file mode 100644
index 0000000..6f446fc
--- /dev/null
+++ b/src/app/task-form/task-form.component.html
@@ -0,0 +1,4 @@
+<ng-container [formGroup]="form">
+  <div>工作事項:<input type="text" formControlName="subject" /></div>
+  <div>工作事項:<input type="text" formControlName="content" /></div>
+</ng-container>
diff --git a/src/app/task-form/task-form.component.ts b/src/app/task-form/task-form.component.ts
new file mode 100644
index 0000000..4fe58cd
--- /dev/null
+++ b/src/app/task-form/task-form.component.ts
@@ -0,0 +1,71 @@
+import { Subject, takeUntil } from 'rxjs';
+import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR, FormBuilder, ControlValueAccessor, Validators, ValidationErrors } from '@angular/forms';
+
+@Component({
+  selector: 'app-task-form',
+  templateUrl: './task-form.component.html',
+  styleUrls: ['./task-form.component.css'],
+  providers:[
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(()=> TaskFormComponent),
+      multi:true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(()=> TaskFormComponent),
+      multi:true,
+    },
+  ],
+})
+export class TaskFormComponent implements OnInit, ControlValueAccessor, Validators, OnDestroy {
+
+  readonly form= this.fb.group({
+    subject: this.fb.control(''),
+    content: this.fb.control(''),
+  });
+  constructor(private fb: FormBuilder) { }
+
+  private readonly stop$ = new Subject<void>();
+
+  ngOnDestroy(): void {
+    this.stop$.next();
+    this.stop$.complete();
+  }
+  writeValue(data:any): void {//這裡data:Task改成data:any，規避patchValue(data)不可為空值
+    if(data){
+      this.form.patchValue(data);
+    }
+  }
+  registerOnChange(fn: ()=> void): void {
+    this.onChange=fn;
+  }
+  registerOnTouched(fn: ()=> void): void {
+    this.onTouched= fn;
+  }
+  setDisabledState?(disabled: boolean){
+    if(disabled){
+      this.form.disable();
+    }else{
+      this.form.enable();
+    }
+  }
+
+  onChange!:(_:Task) =>void;
+  onTouched!:() =>void;
+
+  ngOnInit(): void {
+    this.form.valueChanges
+    .pipe(takeUntil(this.stop$))
+    .subscribe((value:any) =>this.onChange(value));//這裡被增加了value:any，規避onChange(value)的需求
+  }
+
+  validate():ValidationErrors|null{
+    if(this.form.valid){
+      return null;
+    }
+    return {invalid:true};
+  }
+
+}
diff --git a/src/app/task.ts b/src/app/task.ts
new file mode 100644
index 0000000..b407bb4
--- /dev/null
+++ b/src/app/task.ts
@@ -0,0 +1,4 @@
+export class Task {
+  subject!: string;
+  content!: string;
+}