Onclick form is not validating - html

Question

I'm creating form which has Name, Email, Password fields. My code is mentioned below
signup.html
<form class="form-horizontal form-material" id="loginform" [formGroup]="registrationform" novalidate>
<h3 class="box-title m-b-20">Sign Up</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" required="" type="text" placeholder="Name" formControlName="name">
</div>
</div>
<div *ngIf="registrationform.controls['name'].invalid && (registrationform.controls['name'].dirty )" class="alert alert-danger">
<div *ngIf="registrationform.controls['name'].errors.required">
Name should consist 3 Characters
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" required="" type="text" placeholder="Email" formControlName="email">
</div>
</div>
<div *ngIf="registrationform.controls['email'].invalid && (registrationform.controls['email'].dirty )" class="alert alert-danger">
<div *ngIf="registrationform.controls['email'].errors.required">
Please Enter Valid Email
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<show-hide-password size="md" icon="entypo">
<input type="password" name="password" placeholder="Password" formControlName="password">
</show-hide-password>
<!-- <input class="form-control" required="" type="password" placeholder="Password"> -->
<!-- <button (click)="x.type=x.type=='password'?'text':'password'">Show password</button> -->
</div>
</div>
<div *ngIf="registrationform.controls['password'].invalid && (registrationform.controls['password'].dirty )" class="alert alert-danger">
<div *ngIf="registrationform.controls['password'].errors.required">
Name should consist 3 Characters
</div>
</div>
<div class="form-group text-center p-b-20">
<div class="col-xs-12">
<!-- <a [routerLink]="['/authentication/login']" class="btn btn-info btn-lg btn-block btn-rounded text-uppercase waves-effect waves-light">Sign Up</a> -->
<button type="submit" class="btn btn-info btn-lg btn-block btn-rounded text-uppercase waves-effect waves-light">Sign Up</button>
</div>
</div>
<div class="form-group m-b-0">
<div class="col-sm-12 text-center">
Already have an account?
<a class="text-info m-l-5" [routerLink]="['/authentication/login']">
<b>Sign In</b>
</a>
</div>
</div>
</form>
and my signup.ts is below
export class Signup2Component implements OnInit {
registrationform: FormGroup;
emailPattern = "^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$";
constructor(private form: FormBuilder) {
// this.emailPattern = "^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$";
this.registrationFormValidation();
}
ngOnInit() { }
registrationFormValidation() {
this.registrationform = this.form.group({
name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
email: ['', Validators.compose([Validators.required, Validators.pattern(this.emailPattern)])],
password: ['', Validators.compose([Validators.required, Validators.minLength(5)])]
// password:['',Validators.required,Validators.minLength(5)]
})
}
}
Once I click on signup button without entering the data in filed it is not validating, even I check in console also. But When enter I data in the field and removed the data it shows error.
But My intention once I click on signup button it should validate everything

Answer 1

If you want to show error on Submit Try this way
registrationform: FormGroup;
submitted=false;
emailPattern = "^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$";
constructor(private form: FormBuilder) {
// this.emailPattern = "^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$";
this.registrationFormValidation();
}
ngOnInit() { }
registrationFormValidation() {
this.registrationform = this.form.group({
name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
email: ['', Validators.compose([Validators.required, Validators.pattern(this.emailPattern)])],
password: ['', Validators.compose([Validators.required, Validators.minLength(5)])]
// password:['',Validators.required,Validators.minLength(5)]
})
}
onSubmit(){
this.submitted=true;
}
Example:https://stackblitz.com/edit/angular-6-reactive-form-validation-cbsncp

Answer 2

You have need to check the touch property
<div *ngIf="registrationform.controls['email'].touched && registrationform.controls['email'].invalid" class="fx-validation-error">
<div *ngIf="registrationform.controls['email'].errors.required">
Please Enter Valid Email
</div>
</div>
You should need to submit form like this
<form [formGroup]="form" (ngSubmit)="save()">
<div class="row">
<div class="form-group col-12">
<button type="submit" class="fx-btn-primary pull-right" [disabled]="!form.valid">Add</button>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="name" class="fx-form-label">
<span class="fx-required">* </span>Name</label>
<input type="text" formControlName="name" id="name" name="name" class="form-control fx-form-control" autocomplete="off">
<div *ngIf="name.touched && name.invalid" class="fx-validation-error">
<div *ngIf="name.errors.required">Name field is required.</div>
</div>
</div>
</div>
</div>
</form>