與表單驗證方法雷同，只是在驗證與寫法稍微不同。
checkbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <form [formGroup]="checkboxForm">
<div class="form-check pri-txt">
<input
class="form-check-input"
type="checkbox"
name="checkbox1"
id="checkbox1"
value="option"
formControlName="checkbox1"
/>
<label class="form-check-label" for="uncheck">
我已閱讀並同意隱私權政策
</label>
</div>
</form>
|
驗證條件
checkbox.ts
首先引入相對的組件，
1
2
3
4
5
6
| import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from "@angular/forms";
|
建立表單，並於建構式使用 FormBuilder 方法。
1
2
3
4
5
6
7
8
9
| checkboxForm: FormGroup = new FormGroup({
checkbox1: new FormControl(''),
});
constructor(
private formBuilder: FormBuilder
) {
}
|
使用 createForm 方法寫入建立表單的內容，並且在網頁渲染前使用其方法。
特別要注意的地方是必填欄位的驗證條件是 requiredTrue，跟之前只寫 required 不同。
1
2
3
4
5
6
7
8
| ngOnInit() {
this.createForm();
}
createForm() {
this.checkboxForm = this.formBuilder.group({
checkbox1: ['', Validators.requiredTrue],
});
}
|
驗證條件建立好之後，回到 HTML 寫驗證需求。
在 Template 寫入條件
checkbox.html
跟先前寫法有點不同，這次要把選擇的條件使用中括號並且用字串的方式呈現，因 required 這時會跳紅線，這時可以在 error 後方加上一個問號，就能消除紅線。
官方文件解釋：原因是 TS 嚴格模式的默認情況下，TypeScript 中的所有類型都允許 null，非 null 斷言運算符 ! 允許您斷言表達式不是 null 或者 undefined ，TypeScript 編譯器無法自動推斷出該表達式。
簡單了解就是，在嚴格模式下加上問號就可以解決這個錯誤了。
1
2
3
4
5
6
7
8
9
| <div
class="invalid-feedback d-block"
*ngIf="
!checkboxForm.controls['checkbox1'].pristine &&
checkboxForm.controls['checkbox1'].errors?.required
"
>
請先勾選隱私權政策協議
</div>
|
Demo https://stackblitz.com/edit/angular-ivy-rz57hk?embed=1&file=src/app/app.component.html