javascript - 如何在按钮单击时显示验证消息?
问题描述
你能告诉我如何在按钮点击时显示验证信息吗?这是我的代码 https://stackblitz.com/edit/angular-ugdbvg?file=src/app/app.component.html
我想在用户按下按钮required
时显示错误消息。submit
<form novalidate [formGroup]="searchForm" class="calform">
<section class="col-sm-6 bg-white pl-20 pr-20">
<div class="form-group col-sm-4 pl-0 error">
<label class="field-title mb-5">name<span class="color-red fontWt"> *</span></label>
<input type="text" placeholder="Enter name" formControlName="name">
<p class="message" [hidden]="searchForm.get('name')">Required</p>
</div>
<div class="form-group col-sm-4 pl-0 error">
<label class="field-title mb-5">last name <span class="color-red fontWt"> *</span></label>
<input type="text" placeholder="Enter last name" formControlName="lastName">
<p class="message" [hidden]="searchForm.get('lastName')">Required</p>
</div>
<button (click)="submitHandler()">submit</button>
</section>
</form>
js
this.searchForm = this.fb.group({
name: ['', Validators.required],
lastName: ['', Validators.required]
});
解决方案
添加以下行进行检查:
<span class="error" *ngIf="!!searchForm.controls.name.errors.required && (!!searchForm.controls.name.dirty || !!searchForm.controls.name.touched)">
Name is required.
</span>
<span class="error" *ngIf="!!searchForm.controls.lastName.errors.required && (!!searchForm.controls.lastName.dirty || !!searchForm.controls.name.touched)">
lastName is required.
</span>
在您的 ts 文件中:
submitHandler() {
if(this.searchForm.valid) {
// Logic
}
}
推荐阅读
- javascript - 如何从孩子调用父函数 - react-native
- java - res.send 功能不适用于 roll 功能
- spinnaker - 降低 Spinnaker 日志级别
- java - 如何更改导航抽屉活动中的活动
- javascript - angular().service() 不会在我作为参数传递的对象中获得更新
- php - 多边形灯塔graphql类型
- image-processing - 使用 Imagemagick 将图像切成 4*4 的图块
- javascript - jQuery 中的 Yahoo New Weather API oAuth 调用
- android - 覆盖 RxAndroid 调度程序以进行测试
- .net - 为什么“此操作系统不支持 .Net Framework 4.7.2”?(视窗 10)