Show Validation Message on submit in Angular 4 Reactive Forms

Question

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 a

Answer 1

To get the properties like touched, dirty, valid of form control through formGroup use :

signupForm.controls.firstname.touched. same way you can get the other properties like valid and invalid.

if you have created individual object of FormControl then, you can access that object properties as firstname.touched without using formGroup.

for more information about the validation in Model Driven Forms refer Model Driven Form Validations here.

Answer 2

Something like

onSubmit() {
    console.log(this.signupForm)
    this.signupForm.controls['firstname'].markAsTouched()
}

Answer 3

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

onSubmit() {
    this.signupForm.markAllAsTouched();
}