'Show Validation Message on submit in Angular 4 Reactive Forms

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

}
angularformstypescriptangular-reactive-forms


Solution 1:[1]

Something like

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

Solution 2:[2]

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

Solution 3:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user3733648
Solution 2 omer
Solution 3 Stephen Rauch

Related Questions