我創建了一個帶有form標簽的登錄頁面，我希望在用戶單擊提交按鈕時進行客戶端驗證，但沒有任何反應，Checkform方法沒有被觸發。這是我的代碼
<div>
<form >
<p >Log in</p>
<input type="text" username" id="txtUsername" required>
<div >
Please provide Username
</div>
<input text" id="email" id="txtPass" required>
<div >
Please provide Password
</div>
<br>
<button type="button" onclick="Checkform()">
<span >Log in</span>
</button>
</form>
</div>
我添加bootstrap了用于驗證的類以及.ts檔案中的一個方法，當我單擊提交按鈕時應該觸發該方法
<div class="invalid-feedback">
Please provide Username
</div>
<div class="invalid-feedback">
Please provide Password
</div>
Checkform(){
var form = document.getElementsByClassName('login')[0] as HTMLFormElement;
if (form.checkValidity() === false) {
}
form.classList.add('was-validated');
}
如何在用戶單擊提交按鈕時對空欄位進行客戶端驗證并觸發方法？
uj5u.com熱心網友回復：
客戶端驗證我已經使用Reactive forms. 它易于開發??
首先ReactiveFormsModule在檔案中添加imports部分。app.modules.ts在您的component.ts檔案中寫入以下代碼
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class HomeComponent implements OnInit {
loginForm :FormGroup;
submitted=false;
constructor(private formBuilder: FormBuilder) {
this.initializeForm();
}
initializeForm()
{
this.loginForm = this.formBuilder.group({
userName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
UserLogin()
{
this.submitted = true;
if(this.loginForm.invalid)
{
return
}
}
}
這是您可以設計component.html檔案的方式
<form [formGroup]="loginForm" (ngSubmit)="UserLogin()">
<div class="form-group">
<input type="text" class="form-control" [ngClass]="{'is-invalid' :submitted && loginForm.controls['userName'].errors}"
formControlName="userName" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control mt-2" [ngClass]="{'is-invalid' :submitted && loginForm.controls['email'].errors}"
formControlName="email" placeholder="Email">
</div>
<button class="btn btn-primary" type="submit">
<span class="state">Log in</span>
</button>
</form>
在里面initializeForm()我們有userNameand email，這些名字應該是formControlNamein.html檔案。您可以根據需要添加任意數量的欄位。這是登錄頁面的樣子
如果您想了解詳細資訊，請訪問此。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/528414.html
標籤：有角度的推特引导角14