Form validation in angular - html

Question

I am using this html for form validation
I am using Angular 7
-Not working this
What changes need to be done?
<div class="form-group col-sm-6">
<label for="exampleInputPassword1">Email</label>
<input type="text" class="form-control" formControlName="toEmail" >
<div *ngIf="form.controls['toEmail'].errors?.required &&
form.controls['toEmail'].errors?.email">
Enter correct email
</div>
</div>```

Answer 1

try this:
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
toEmail: ["", [Validators.required, Validators.email]]
});
}
in your html :
<form #form="ngForm" [formGroup]="myForm" (submit)="onSubmit(form,$event)">
<input formControlName="toEmail" placeholder="Your email">
<p class="text-danger"
[hidden]="myForm.controls['toEmail'].valid || (myForm.controls['toEmail'].pristine && !form.submitted)">
incorrect email address
</p>
<button type="submit">
Send
</button>
</form>
Stackblitz Here

Answer 2

Here is Example
.ts file
myregisterForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myregisterForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email,Validators.pattern('^[a-z0-9._%+-]+#[a-z0-9.-]+\\.[a-z]{2,4}$')]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
}
// convenience getter for easy access to form fields
get f() { return this.myregisterForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.myregisterForm.invalid) {
return;
}
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.myregisterForm.value))
}
.html
<form [formGroup]="myregisterForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Email</label>
<input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
</div>
</form>

Answer 3

Hi try this.
<div class="form-group col-sm-6">
<label for="exampleInputPassword1">Email</label>
<input type="text" class="form-control" formControlName="toEmail" >
<div *ngIf="form.get('toEmail').hasError('required')">
Enter correct email
</div>
</div>