Form validation in angular

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>