0%

Angular 筆記 - Checkbox 的驗證實作

angular

表單驗證方法雷同,只是在驗證與寫法稍微不同。

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