typescript 在 Angular 4 响应式表单中提交时显示验证消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44774192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Validation Message on submit in Angular 4 Reactive Forms
提问by Tayyab Rahman
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.
我正在使用 Angular 4，反应式表单。我想在用户单击“提交/创建帐户”按钮时显示验证错误消息。这是我正在使用的 HTML 和打字稿代码。
<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)
}
}
回答by user3733648
Something like
就像是
onSubmit() {
console.log(this.signupForm)
this.signupForm.controls['firstname'].markAsTouched()
}
回答by omer
you can do this using from markAllAsTouched()method.
it will mark all the form controls as touched and by doing so will trigger validation errors where needed
您可以使用 frommarkAllAsTouched()方法执行此操作。它会将所有表单控件标记为已触摸，并且这样做将在需要时触发验证错误
onSubmit() {
this.signupForm.markAllAsTouched();
}
回答by Ankit Prajapati
To get the properties like touched, dirty, validof form control through formGroupuse :
要获得的属性，如touched，dirty，valid通过表单控件的formGroup使用：
signupForm.controls.firstname.touched. same way you can get the other properties like valid and invalid.
signupForm.controls.firstname.touched. 以同样的方式您可以获得其他属性，如有效和无效。
if you have created individual object of FormControlthen, you can access that object properties as firstname.touchedwithout using formGroup.
如果您创建了FormControlthen 的单个对象，则可以像firstname.touched不使用formGroup.
for more information about the validation in Model Driven Forms refer Model Driven Form Validationshere.
有关模型驱动表单中验证的更多信息，请参阅此处的模型驱动表单验证。
