NgFormControls

This is an angular library which contains pre-defined reactive form controls and groups that are commonly used.

For example-

• An email control with email pattern validation.
• A password control with common password validations.
• Sign In form group (with email and password controls), ready to integrate with your sign-in template.
• Sign up form group (with common controls)
• and more...

##Uses

There are two types of form group currently available

• Sign In with email/phone/username and password controls
• Sign Up with firstName, lastName, email, phone, password and confirmPassword controls

###Using form groups

Extend the component class with required form class and update your form template with form group and controls names

• Sign In form

component.ts

import {Component} from '@angular/core';
import {SignInForm} from 'dist/ng-form-controls';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent extends SignInForm {
  constructor() {
    super();
  }
}

component.html

<form [formGroup]="formGroup" autocomplete="off">
          <div class="form-field">
            <label for="email" class="mb-1">Email</label>
            <input pInputText id="email" type="email" autocomplete="off" formControlName="email">
            <control-error [control]="formGroup.controls.email"></control-error>
          </div>
          <div class="form-field">
            <label for="password" class="mb-1">Password</label>
            <input pInputText id="password" type="password" formControlName="password">
            <control-error [control]="formGroup.controls.password"></control-error>
          </div>
        </form>

###Using controls You can directly use the controls into your own form groups via importing them.

import {controls} from 'dist/ng-form-controls';

myFormGroup = this.fb.group({
  email: controls.emailControl
});

###Using patterns You can also use the available regular expressions for validations.

import {patterns} from 'dist/ng-form-controls';

this.myFormGroup.controls.email.setValidators([Validators.pattern(patterns.email)]);

###Using validators Some useful validator functions are also available as public api.

import {SignUpForm, passwordConfirming} from 'dist/ng-form-controls';

export class SignUpComponent extends SignUpForm {

  constructor() {
    super();
    // adding custom validator function
    this.formGroup.controls.confirmPassword.setValidators(
      passwordConfirming(this.formGroup.controls.password));
  }
}

###Adding/Removing controls Controls can be added or removed dynamically, directly on form group or these available methods

addControl(name: string, control: AbstractControl): void;
addControls(entries: [string, AbstractControl][]): void;
removeControl(name: string): void;
removeControls(names: string[]): void;

export class SignInComponent extends SignInForm {
  
  constructor() {
    super();
    // adding control in form group
    this.formGroup.addControl('newControl', new FormControl(''));
    
    // adding control using addControl
    this.addControl('otp', new FormControl('', [
      Validators.required]));
  }
}

###Available controls

• firstName required, alphabetic
• lastName alphabetic
• email required, email
• username required, userName
• phone required, phone
• password required, password
• confirmPassword required, password

###Default controls Sign Up

• firstName
• lastName
• email
• phone
• password
• confirmPassword

Sign In

• email/phone/username
• password

###Patterns

• alphabetic
• numeric
• alphaNumeric
• userName
• email
• password
• phone