# ng-form-controls

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

Latest version **1.0.2** (published 2020-12-09) · 0 weekly downloads

## Install

```sh
npm install ng-form-controls
pnpm add ng-form-controls
yarn add ng-form-controls
bun add ng-form-controls
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-12-09 |
| First published | 2020-12-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 103.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mayank042 |

## Links

- npm: https://www.npmjs.com/package/ng-form-controls
- npm.io page: https://npm.io/package/ng-form-controls

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 1.0.2 (latest) — 2020-12-09
- 1.0.1 — 2020-12-08
- 1.0.0 — 2020-12-08

## README

# 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`
```typescript
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`
```angular2html
<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.

```typescript
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.

```typescript
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.

```typescript
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

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

```typescript
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

---
_Source: https://npm.io/package/ng-form-controls · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._