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 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)
    }

}

Answer 1

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();
}

Answer 2

Something like

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

Answer 3

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.