From 7557881de041901cb055ec13039a6d2ff2bc75c7 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Tue, 8 Nov 2022 16:21:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=96=AE=E9=A9=97=E8=AD=89=E7=9A=84?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=20=E8=AE=8A=E6=9B=B4=E4=BB=A3=E8=BE=A6?=
 =?UTF-8?q?=E4=BA=8B=E9=A0=85=E7=8B=80=E6=85=8B"=E5=B7=B2=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90"=EF=BC=8C=E5=BF=85=E9=A0=88=E8=A6=81=E8=BC=B8?=
 =?UTF-8?q?=E5=85=A5=E5=AE=8C=E6=88=90=E6=97=A5=E6=9C=9F=20Angular=20?=
 =?UTF-8?q?=E6=8F=90=E4=BE=9BaddValidators()=20setValidators()=20and=20rem?=
 =?UTF-8?q?oveValidators()=20=E8=A8=AD=E5=AE=9A=E8=A1=A8=E5=96=AE=E9=A9=97?=
 =?UTF-8?q?=E8=AD=89=E5=BE=8C=EF=BC=8C=E9=83=BD=E8=A6=81=E5=91=BC=E5=8F=AB?=
 =?UTF-8?q?updateValueAndValidity()=EF=BC=8C=E5=9F=B7=E8=A1=8C=E6=9C=80?=
 =?UTF-8?q?=E5=BE=8C=E7=9A=84=E9=A9=97=E8=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html | 26 ++++++++--------
 src/app/app.component.ts   | 64 ++++++++++++++++++--------------------
 2 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 258477c..f379fa6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,15 +1,15 @@
-<button type="button" (click)="onSetValue()">Set</button>
-<button type="button" (click)="onAdd()">Add</button>
-<button type="button" (click)="onClear()">Clear</button>
-<div class="form" [formGroup]="form">
-  <div formArrayName="tasks" *ngFor="let control of tasks.controls; let index = index">
-    <ng-container [formGroupName]="index">
-      <div>工作事項：<input type="text" formControlName="subject" /></div>
-      <div>工作內容：<input type="text" formControlName="content" /></div>
-      <button type="button" (click)="onRemove(index)">Remove</button>
-      <hr>
-    </ng-container>
+<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>
-
-<pre>{{ tasks.value | json }}</pre>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d50d3cf..b8e1237 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,49 +1,45 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import {
-  AbstractControl,
-  FormArray,
   FormBuilder,
   FormControl,
-  ValidationErrors,
+  FormGroup,
+  Validators,
 } from '@angular/forms';
-import { Observable, of, Subject, takeUntil } from 'rxjs';
-import { debounce, debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
-
+import { map } from 'rxjs';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
-  form = this.fb.group({
-    tasks: this.fb.array([]),
-  });
-  get tasks(): FormArray {
-    return this.form.get('tasks') as FormArray;
-  }
-  constructor(private fb: FormBuilder) { }
-
-  onSetValue(): void {
-    this.tasks.patchValue([
-      { subject: 'Task A', content: 'Do something...' },
-      { subject: 'Task B', content: 'Do something...' },
-    ])
+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;
   }
-
-  onAdd(): void{
-    const group = this.fb.group({
-      subject: this.fb.control(''),
-       content: this.fb.control(''),
-    });
-    this.tasks.push(group);
+  get status(): FormControl{
+    return this.form.get('Status') as FormControl;
   }
-
-  onRemove(index: number): void {
-    this.tasks.removeAt(index);
+  get finishDate(): FormControl{
+    return this.form.get('FinishDate') as FormControl;
   }
-
-  onClear(): void {
-    this.tasks.clear();
+  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();
+      },
+    })
   }
 }