Ngx Form Control

This module is used for Angular 6.
This module help you to quickly generate bootstrap controls.

How to use:

Installation:

npm i ngx-form-control

Import library

Edit .angular.json

{
  "projects": {
    "<your-app>": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/select2/dist/css/select2.min.css",
              ...
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/select2/dist/js/select2.min.js",
              ...
            ],
            ...
          },
          ...
        }
      }
    },
    ...
  }
}

Import module:

Edit in src/app/app.module.ts:

//...
import { FormsModule } from '@angular/forms';
import { FormControlModule } from 'ngx-form-control';
 
@NgModule({
  //...
  imports: [
    //...
    FormsModule,
    FormControlModule
  ],
  //...
})
//...

And call in component:

Input (Document)

<!-- Email field -->
<ngx-form-input name="email"
                label="Email *"
                placeholder="Type your email"
                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                required="true"
                [(ngModel)]="data.email"></ngx-form-input>

<!-- Password field -->
<ngx-form-input name="password"
                label="Password *"
                type="password"
                placeholder="Type your password"
                required="true"
                minlength="3"
                [(ngModel)]="data.password"></ngx-form-input>
 
<ngx-form-input name="password"
                label="Repeat password *"
                type="password"
                placeholder="Type your password again"
                [match]="data.password"
                required="true"
                [(ngModel)]="data.repeatPassword"></ngx-form-input>

Textarea (Document)

<ngx-form-textarea name="description"
                   label="Description"
                   placeholder="Type your description"
                   [(ngModel)]="data.description"></ngx-form-textarea>

Select (Document)

<ngx-form-select name="gender"
                 label="Gender *"
                 placeholder="Select your gender"
                 required="true"
                 valueKey="value"
                 [options]="listGender"
                 [(ngModel)]="data.gender"></ngx-form-select>

Select2 (Document)

<ngx-form-select2 name="gender"
                  label="Gender *"
                  placeholder="Select your gender"
                  required="true"
                  valueKey="value"
                  [options]="listGender"
                  [(ngModel)]="data.gender"></ngx-form-select2>

List Radio (Document)

<ngx-form-radio name="gender"
                label="Gender *"
                required="true"
                valueKey="value"
                [options]="listGender"
                [(ngModel)]="data.gender"></ngx-form-radio>

List Checkbox (Document)

<ngx-form-checkbox name="skill"
                   label="Skills *"
                   required="true"
                   multiple="true"
                   [options]="listSkill"
                   [(ngModel)]="data.skill"></ngx-form-checkbox>

Toggle (Document)

<!-- Checkbox style -->
<ngx-form-toggle name="allowAd"
                 label="I agree to receive ad email!"
                 required="true"
                 [(ngModel)]="data.allowAd"></ngx-form-toggle>

<!-- Toggle style -->
<ngx-form-toggle name="allowAd"
                 label="I agree to receive ad email!"
                 required="true"
                 type="toggle"
                 [(ngModel)]="data.allowAd"></ngx-form-toggle>