在 Angular 4 响应式表单中提交时显示验证消息 [英] Show Validation Message on submit in Angular 4 Reactive Forms
本文介绍了在 Angular 4 响应式表单中提交时显示验证消息的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Angular 4,反应式表单.我想在用户单击提交/创建帐户"按钮时显示验证错误消息.这是我正在使用的 HTML 和打字稿代码.
<div class="form-group"><输入类型="文本"id="姓氏"姓名=姓氏"formControlName="姓氏"占位符="姓氏"><span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched"类=帮助块">请输入姓氏(最少 2 个字符)</span>
<div class="form-group"><按钮类型=提交"class="btn btn-success btn-lg btn-qte">创建帐户</button>
</表单>
<小时>
类型脚本代码
<小时>导出类 UserRegistrationComponent 实现 OnInit {注册表格:表格组;ngOnInit() {this.signupForm = new FormGroup({'firstname': new FormControl(null, [Validators.required, Validators.minLength(2)]),'lastname': new FormControl(null, [Validators.required, Validators.minLength(2),]),'businessname':新的FormControl(空),'phonenumber': new FormControl(null, [Validators.required]),'email': new FormControl(null, [Validators.required, Validators.email]),'密码': new FormControl(null, [Validators.required]),'confirmpassword': new FormControl(null, Validators.required)});}提交(){console.log(this.signupForm)}}
解决方案
类似的东西
onSubmit() {console.log(this.signupForm)this.signupForm.controls['firstname'].markAsTouched()}
I am using Angular 4, Reactive forms.I want to show validation error message when the user clicks on Submit/Create Account button. Here is the HTML and typescript code that I am using.
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<input type="text"
id="firstname"
name="firstname"
formControlName="firstname"
placeholder="First Name">
<span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched"
class="help-block"> Please Enter First Name (Minimum 2 Characters)</span>
</div>
<div class="form-group">
<input type="text"
id="lastname"
name="lastname"
formControlName="lastname"
placeholder="Last Name">
<span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched"
class="help-block"> Please Enter Last Name (Minimum 2 Characters)</span>
</div>
<div class="form-group">
<button type="submit"
class="btn btn-success btn-lg btn-qte">Create Account</button>
</div>
</form>
TYPE SCRIPT CODE
export class UserRegistrationComponent implements OnInit {
signupForm: FormGroup;
ngOnInit() {
this.signupForm = new FormGroup({
'firstname': new FormControl(null, [Validators.required, Validators.minLength(2)]),
'lastname': new FormControl(null, [Validators.required, Validators.minLength(2),]),
'businessname': new FormControl(null),
'phonenumber': new FormControl(null, [Validators.required]),
'email': new FormControl(null, [Validators.required, Validators.email]),
'password': new FormControl(null, [Validators.required]),
'confirmpassword': new FormControl(null, Validators.required)
});
}
onSubmit() {
console.log(this.signupForm)
}
}
解决方案
Something like
onSubmit() {
console.log(this.signupForm)
this.signupForm.controls['firstname'].markAsTouched()
}
这篇关于在 Angular 4 响应式表单中提交时显示验证消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!