Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Popover Login Form working code.

Here is the working code snippet and please use carefully and if you have any kind of query then please comment below:

1. Very first you have to run below command into your terminal to install popover module into your Angular 9 application:

npm install ngx-smart-popover --save

2. After done with above command, you have write below code into app.module.ts file:

...
import { PopoverModule } from "ngx-smart-popover";



imports: [
...
PopoverModule
...
]

  

3. Now you have to write below code into your app.component.ts file:

<div class="text-center">
  <h3>Angular Popover Login Form:</h3>
 
</div>
<div class="container text-center mb-4">


  <popover-content #myPopover 
                title="Login Form" 
                placement="right top"
                [animation]="true" 
        [closeOnClickOutside]="false"
                [closeOnMouseOutside]="false">
  <form [formGroup]="registerForm" (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>
          
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
</popover-content>
 
<button [popoverOnHover]="false"  [popover]="myPopover" class="btn btn-primary">Please Click to Login</button>




</div>

 

4. Finally you have to write below code into your app.component.ts file:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
  selector: 'app-ngx-bootstrap',
  templateUrl: './ngx-bootstrap.component.html',
  styleUrls: ['./ngx-bootstrap.component.css']
})
export class AppComponent implements OnInit {

  
  registerForm: FormGroup;
  submitted = false;
  
  constructor(private formBuilder: FormBuilder) { }
  // convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.registerForm.invalid) {
        return;
    }
    
    }
  ngOnInit(): void {
  this.registerForm = this.formBuilder.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

}

 

I have used Bootstrap 4 in it and you can check my old post and also add Bootstrap 4.

If you have any query then please let me know.

Jassa

Thank you