Categories

Sunday, September 26, 2021
therichposts@gmail.com
Angular 9Bootstrap 4ngx smart popover

Angular 9 Popover Login Form working code

Angular 9, Angular 10

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.