0.0.29 • Published 5 years ago
ngx-form-control v0.0.29
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>
0.0.29
5 years ago
0.0.28
5 years ago
0.0.27
5 years ago
0.0.26
5 years ago
0.0.25
5 years ago
0.0.24
5 years ago
0.0.23
5 years ago
0.0.22
5 years ago
0.0.21
5 years ago
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago