我在 May Angular 應用程式中有一個反應形式。問題是每當我嘗試提交無效表單時，表單就會提交（頁面重繪 ；我在資料庫中沒有看到任何內容；我認為這只是行為）。
我希望頁面不重繪 并使用我的函式顯示所有無效欄位。下面是我的代碼的一部分。
<form class="form-signup" [formGroup]="newCustomerForm" (ngSubmit)="validateAllFormFields() && newCustomerForm.valid && registerNewMember()">
<! I am unbale to deactivate this button when form is invalid-->
<button type="submit" class="btn-signup" [disable]="newCustomerForm.invalid">Sign Up</button>
</form>
//function which makes all fields touched.
public validateAllFormFields(formGroup: FormGroup): boolean {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
}
else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
});
return true;
}
uj5u.com熱心網友回復：
在這個例子中，提交按鈕只有在表單有效（[disabled]="!form.valid"）時才會啟用，這意味著必須通知用戶名（并且必須是有效的用戶名）。
form: FormGroup;
onSubmit()
{
this.form=this.fb.group({
UserName:['',[Validators.required,Validators.minLength(4)]]
})
}
<form class="form-horizontal" [formGroup]="form">
<div >
<label id="label">Username</label>
<input id="username" formControlName="UserName">
<div><div *ngIf="service.Name && service.Name.invalid && (service.Name.dirty || service.Name.touched)"
>
<div *ngIf="service.Name && service.Name.errors?.required" >
User Name is required
</div>
<div *ngIf="service.Name && service.Name.errors?.minlength">
Minimum 4 characters required
</div>
</div></div>
</div>
<div >
<button type="submit" [disabled]="!form.valid">Submit<button>
</div>
uj5u.com熱心網友回復：
你的表單變數名是什么？是newCustomerForm還是只是form？
此外，您已經寫了 [ disable ]="form.invalid" 而不是 [ disabled ]="newCustomerForm.invalid"。（如果您的表單名稱是 newCustomerForm）
<form class="form-signup" [formGroup]="newCustomerForm" (ngSubmit)="validateAllFormFields() && newCustomerForm.valid && registerNewMember()">
<button type="submit" class="btn-signup" [disable]="newCustomerForm.invalid">Sign Up</button>
</form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/402437.html
標籤：
下一篇：單擊提交后如何清除輸入表單