ng-form-debounce-click v1.0.0

NgFormDebounceClick

• A simple directive with no extenal dependencies.
• Library location: projects/form-debounce-click directory of this repository.
• works for Angular 8 and above in all devices.

Examples/Demo

• A simple Example can be found under src/app directory of this repository.

@Inputs()

@Outputs()

Usage

1) Register the NgFormDebounceClickModule in your app module. > import { NgFormDebounceClickModule } from 'ng-form-debounce-click'

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgFormDebounceClickModule } from 'projects/ng-form-debounce-click';


@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   FormsModule,
   ReactiveFormsModule,
   NgFormDebounceClickModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

2) Use the directive (NgFormDebounceClickDirective) in your component.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
  <div class="container">
  <div class="form" [formGroup]="formGroup">
    <label for="name"><b>Name</b></label>
    <input type="text" formControlName="Name">
    <p class="error" *ngIf="formGroup.controls.Name?.errors?.required && formGroup.controls.Name?.touched">Name is required</p>
  
    <label for="ssn"><b>SSN</b></label>
    <input type="text"  formControlName="SSN">
    <p class="error" *ngIf="formGroup.controls.SSN?.errors?.required && formGroup.controls.SSN?.touched">SSN is required</p>
      
    <button ngFormDebounceClick [validateForm]="formGroup" (ngFormDebounceSubmit)="submit()">Submit</button>
  </div>
</div>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

}

Running the example in local env

• npm i
• Run ng serve for a dev server and running the demo app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.