表單驗證的設定

變更代辦事項狀態"已完成"，必須要輸入完成日期
Angular 提供addValidators() setValidators() and removeValidators()
設定表單驗證後，都要呼叫updateValueAndValidity()，執行最後的驗證

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>

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;
-  }
+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){}
-
-  onSetValue(): void {
-    this.tasks.patchValue([
-      { subject: 'Task A', content: 'Do something...' },
-      { subject: 'Task B', content: 'Do something...' },
-    ])
+  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();
+      },
+    })
   }
 }