@gmana/ngx-forms v0.0.9

ngx-forms

Install

yarn add @gmana/ngx-forms

Usage

// app.module
import { NgxFormsModule, SelectOptions, noWhitespaceValidator } from '@gmana/ngx-forms';

imports: [NgxFormsModule],

// app.component.ts
signUpForm: FormGroup;

optons: SelectOptions[] = [
  { value: 'male', viewValue: 'Male' },
  { value: 'female', viewValue: 'Female' },
];

ngOnInit() {
  this.signUpForm = this.fb.group(
    {
      displayName: ['', [Validators.required, noWhitespaceValidator]],
      email: ['', [Validators.required, Validators.email]],
      phoneNumber: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(16)]],
      confirmPassword: ['', Validators.required],
      companyName: ['', Validators.required],
      companyEmail: [''],
      companyPhone: [''],
      gender: [''],
      dob: ['']
    },
    {
      validator: MustMatch('password', 'confirmPassword'),
    },
  );
}

// app.component.html
<gmana-text-input [formControl]="signUpForm.get('displayName')" [label]="'Display Name*'" icon="person"></gmana-text-input>
<gmana-password-input [formControl]="signUpForm.get('password')" [label]="'Password*'"></gmana-password-input>
<gmana-email-input [formControl]="signUpForm.get('email')" [label]="'email*'"></gmana-email-input>
<gmana-number-input [formControl]="signUpForm.get('phoneNumber')" [label]="'phoneNumber*'"></gmana-number-input>

// select
<gmana-select [formControl]="ngxForm.get('gender')" [label]="'Gender'" [options]="optons"></gmana-select>

// date
<gmana-datepicker [formControl]="ngxForm.get('dob')" [label]="'Date Of Birth'"></gmana-datepicker>

// spinner button
// version: 0.0.8
<gmana-spinner-button [icon]="'delete'" [label]="'Submiting'" [isSubmitting]="false" [color]="'warn'" [isDisabled]="true"></gmana-spinner-button>
// version: 0.0.9
<gmana-spinner-button [type]="'button'" (gClick)="onClick($event)"></gmana-spinner-button>

| property     | default   | props                       |
| ------------ | --------- | --------------------------- |
| icon         | ''        | material icon               |
| label        | Submit    | -                           |
| isSubmitting | false     | true, false                 |
| type         | 'submit'  | 'submit', 'button'          |
| isDisabled   | false     | true, false                 |
| color        | 'primary' | 'primary', 'accent', 'warn' |