From 3c9aac7f93418f4edcd9da40ed97b5405e6773ff Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Tue, 8 Nov 2022 13:21:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E8=A8=82=E6=AC=84=E4=BD=8D=E5=90=8C?=
 =?UTF-8?q?=E6=AD=A5=E9=A9=97=E8=AD=89=E6=96=B9=E6=B3=95=EF=BC=8C=E8=A1=A8?=
 =?UTF-8?q?=E5=96=AE=E9=99=A3=E5=88=97=E4=B8=8D=E5=BE=97=E7=82=BA=E7=A9=BA?=
 =?UTF-8?q?=20=E7=AF=84=E4=BE=8B=E7=A8=8B=E5=BC=8F=E6=9C=89=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C=EF=BC=8C=E6=AD=A4=E6=AC=A1commit=E7=84=A1=E6=B3=95?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=EF=BC=8CarrayCannotEmpty=E5=85=A7=E9=83=A8?=
 =?UTF-8?q?=E4=B8=8D=E5=8F=AF=E7=82=BAnull?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html                    | 17 +++------
 src/app/app.component.ts                      | 37 ++++---------------
 .../array-cannot-empty.validator.ts           |  8 ++++
 3 files changed, 22 insertions(+), 40 deletions(-)
 create mode 100644 src/app/validators/array-cannot-empty.validator.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index dd49e59..0ede04b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,15 +1,10 @@
 <div [formGroup]="form">
-  <div>
-    帳號：<input type="text" formControlName="id" />
-    <ng-container *ngIf="id.touched">
-      <span *ngIf="id.hasError('required')">帳號為必填欄位</span>
+  <div formArrayName="Tasks" *ngFor="let control of tasks.controls; let index = index">
+    <ng-container [formGroupName]="index">
+      <input type="text" placeholder="主旨" formControlName="Subject" />
+      <input type="text" placeholder="內容" formControlName="Content" />
     </ng-container>
   </div>
-  <div>
-    密碼：<input type="password" formControlName="password" />
-  </div>
-  <div>
-    <button type="reset">重設</button>
-    <button type="submit">登入</button>
-  </div>
+  <span *ngIf="tasks.hasError('cannotEmpty')">至少需要一筆工作事項</span>
 </div>
+<pre>{{ tasks.errors | json }}</pre>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9151156..36232db 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,7 @@
 import { Component } from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
+import { FormArray, FormBuilder } from '@angular/forms';
+
+import { arrayCannotEmpty } from './validators/array-cannot-empty.validator';
 
 @Component({
   selector: 'my-app',
@@ -12,32 +9,14 @@ import {
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  // 方法一
-  // readonly form = new FormGroup({
-  //   id: new FormControl('', [Validators.required]),
-  //   password: new FormControl(''),
-  // });
-
-  // 方法二
-  // readonly form = new FormGroup({
-  //   id: new FormControl('', { validators: [Validators.required] }),
-  //   password: new FormControl(''),
-  // });
-
-  // 方法三
-  // readonly form = this.fb.group({
-  //   id: this.fb.control('', [Validators.required]),
-  //   password: this.fb.control('')
-  // });
-
-  // 方法四
   readonly form = this.fb.group({
-    id: this.fb.control('', { validators: [Validators.required] }),
-    password: this.fb.control(''),
+    tasks: this.fb.array([], {
+      validators: [arrayCannotEmpty]?
+    }),
   });
 
-  get id(): FormControl {
-    return this.form.get('id') as FormControl;
+  get tasks(): FormArray {
+    return this.form.get('tasks') as FormArray;
   }
 
   constructor(private fb: FormBuilder) {}
diff --git a/src/app/validators/array-cannot-empty.validator.ts b/src/app/validators/array-cannot-empty.validator.ts
new file mode 100644
index 0000000..ad9ada6
--- /dev/null
+++ b/src/app/validators/array-cannot-empty.validator.ts
@@ -0,0 +1,8 @@
+import { FormArray, ValidationErrors } from '@angular/forms';
+
+export function arrayCannotEmpty(formArray: FormArray): ValidationErrors | null {
+  if (formArray.length === 0) {
+    return { cannotEmpty: true };
+  }
+  return null;
+}