angular - 想要验证 Angular 表单,无论出现什么错误,按钮都会提交
问题描述
所以我制作了一个带有登录表单的小型 Angular 5 应用程序。我已将“电子邮件”和“密码”作为必填字段。如果我选择该字段并失去焦点,它会变成红色,表示有问题。如果我现在提交我的表单,无论如何它都会调用我的服务和 API,即使有必要的错误。
这是我的代码:
<div class="example-container">
<form (ngSubmit)="onSubmit($event)" #loginForm="ngForm" *ngIf="this.showForm; else loadingTemplate">
<div class="form-group">
<mat-form-field>
<input matInput placeholder="Email" name="email" [(ngModel)]="loginModel.email" required>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="Password" name="password" [(ngModel)]="loginModel.password" required>
</mat-form-field>
<mat-checkbox name="rememberMe" [(ngModel)]="loginModel.rememberMe">
Remember Me
</mat-checkbox>
<button mat-raised-button color="accent" type="submit">Submit</button>
</div>
</form>
<ng-template #loadingTemplate>
<div class="container">
<p>Please wait while your credentials are being checked...</p>
<img src="../../assets/giphy.gif">
</div>
</ng-template>
</div>
这是我的 .ts 文件的一部分:
loginForm: FormGroup;
ngOnInit() {
this.loginForm = this.fb.group({
loginModel: this.loginModel
});
}
onSubmit(e: Event) {
e.preventDefault();
if (this.loginForm.valid) {
this.showForm = false;
// TODO check if correct login
this.loginService.postLoginData(this.loginModel)
.subscribe(
data => {
this.router.navigateByUrl('/table');
},
error => {
// alert('login failed');
this.showForm = true;
this.openSnackBar(`Login for email: ${this.loginModel.email} failed!`);
});
}
}
我的 loginForm.valid 总是返回 true。有人能看出可能是什么问题吗?
解决方案
首先,您可以使用相反的条件,而不是缩进整个代码:
if (this.loginForm.invalid) { return; }
// Your code
这似乎没什么,但是一旦你明白了这一点,你就会获得很多时间。
接下来,声明表单的语法是
@ViewChild('loginForm') loginForm: NgForm;
现在,您正在声明一个反应式表单,并使用模板驱动表单的语法。
推荐阅读
- firebase - Firebase 托管 CSP 随机数实施
- android - dataBindingMergeDependencyArtifactsDebug while building
- vue.js - 用于 vue.js 中的 javascript 的 epson sdk?
- python - 根据 Pandas 中每天的第一条记录创建数据框
- r - 将数据框列添加到列表列
- c++ - 共享模式在共享访问中是什么意思?
- android - Android - 我什么时候应该在 Strings.xml 资源文件中转义 unicode?
- linux - 在 github 的 windows 代理上运行 docker 镜像
- c# - 在 Bogus 库中为 Enum 生成假数据
- android - Capacitor v3:在安卓上打开时出现空白页