我正在嘗試在Angular專案中驗證輸入欄位，并使用了一個教程，似乎它正在按照預期作業。
上面使用的是反應式表單，它的驗證作業如下：
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label>Name:</label>
<input class="form-control" formControlName="name" type="text">
</div>
<div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touch)" class="alert alert-danger" >
<div *ngIf="angForm.controls['name'].errors.required">
名稱是必須的。
</div>
</div>
<div class="form-group">
<標簽>地址:</label>
<input class="form-control" formControlName="address" type="text">
</div>
<div *ngIf="angForm.controls['address'].invalid && (angForm.controls['address'].dirty || angForm.controls['address'].touch)" class="alert alert-danger" >
<div *ngIf="angForm.controls['address'].errors.required">
電子郵件是必須的。
</div>
</div>
<按鈕型別="提交"
[disabled]="angForm.pristine || angForm.invalid" class="btn btn-success" >
保存
</button>
</form>
上面的按鈕默認是禁用的。因此，當用戶開始寫作并保持一個輸入欄位空白時，它就會驗證表單。我的要求是啟用該按鈕，當點擊時，驗證就會開始作業。所以我所做的如下：
<form [formGroup]="angForm" #addData='ngForm' (ngSubmit)="AddData(addData)" >
<button type="submit" class="btn btn-success" > //洗掉了禁用屬性
保存
</button>
在TypeScript中這樣做：
AddData(addData: NgForm) {
this.createForm();
}
createForm() {
this.angForm = this.fb.group({
name: ['', Validators.required ].
});
}
盡管如此，它并沒有像預期那樣觸發驗證。所以我想要的是在點擊按鈕時觸發驗證，但我在這里無法做到。有什么辦法可以解決這個問題嗎？
uj5u.com熱心網友回復：
也許你可以在你的AddData函式上添加一點邏輯：
AddData() {
if (this.angForm.valid) {
//有效表單的邏輯
} else {
Object.keys(this.angForm.controls).forEach(field => {
const control = this.form.get(field);
control.markAsTouched({ onlySelf: true })。
});
}
}
這將在人點擊按鈕時將元素標記為被觸摸，這將觸發用于在輸入上顯示錯誤資訊和樣式的邏輯，假設是：
!this.angForm.controls['name'].valid && this.angForm.controls['name'].touch;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/311815.html
標籤：
上一篇：Laravel登錄設定驗證資訊