Extension no official from @ng-bootstrap/ng-bootstrap
to generate inputs with
validators. !Warning! You should will not use this library in a release
enviroment because this is an alpha version and this may be contains some bugs
than have not been fixed.
Index |
---|
1. NgbInputComponent |
2. NgbFileComponent |
3. NgbDropDownComponent |
You must be install ng-bootstrap before to start to install it, you shall check the steps to install ng-bootstrap in the follow link.
Once installed you need run the next command to install it via npm.
npm i ngb-input --save
On finish the installation, you need import in the main module.
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbInputModule } from 'ngb-input';
@NgModule({
...
imports: [
...
NgbModule,
NgbInputModule
...
]
...
})
export class AppModule { }
Additional, you can add your custom default error and informative messages with the follow code
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbInputModule } from 'ngb-input';
@NgModule({
...
imports: [
...
NgbModule,
NgbInputModule.initializeApp(options)
...
]
...
})
export class AppModule { }
The main idea to use this is like a html input, but with some new attributes to help you to write forms easier. Example:
<ngb-input type="text" id="foo" name="foo" [(ngModel)]="foo" label="Text required" [required]="true" ...></ngb-input>
The error message is showed only when the input lost the focus and this is empty
The new attributes add are:
Attribute | Type | Default | Description |
---|---|---|---|
label | string | '' | Label that sepecifics the type of information require |
debounce | number | 0 | Added a time out to update the model |
requiredError | string | 'This field is required' | Message to show when the field is required and this haven't any value |
formatError | string | 'Invalid input data' | Message to show when the field's value doesn't mach with the pattern |
manuallyHandleErrors | boolean | false | |
showRequiredError | boolean | false | |
showFormatError | boolean | false | |
dirty | boolean | false | Set the input as touched and show an error if apply |
Components that works like <input type="file">
with validators, label and
drag & drop functions.
To use this component, you can write a code similar to these
<ngb-file id="foo" name="foo" accept="image/*" label="Profile picture" placeholcer="Select a picture" [(ngModel)]="foo"></ngb-file>
You can add your custom html code into the tag to update the information to show in the component. Example:
<ngb-file id="foo" name="foo" accept="image/*" label="Profile picture" [(ngModel)]="foo" (ngModelChange)="drawImage($event)">
<img *ngIf="imageSrc; else message" [src]="imageSrc" style="width: 100%; height: auto;" />
<ng-template #message>
Select a picture
</ng-template>
</ngb-file>
@Component({
selector: 'foo',
templateUrl: 'foo.html'
})
export class YourComponent() {
public imageSrc = '';
public drawImage(files: FileList) {
if (files.length == 0) {
this.imageSrc = '';
return;
}
let reader = new FileReader();
let self = this;
reader.readAsDataURL(files[0]);
reader.onloadend = evt => self.imageSrc = (evt.target.result as string);
}
}
The attributes supported are:
Attribute | Type | Default | Description |
---|---|---|---|
id | string | '' | The HTML id for the element |
name | string | '' | The HTML name for the element |
required | boolean | false | Set this field as required |
disabled | boolean | false | Enabled or disabled this field |
ngModel | FileList | null | The model for the element |
accept | string | '' | The file types accepted, this works like HTML input accept attribute |
multiple | boolean | false | Enable the possibility of select many files |
label | string | '' | Label that sepecifics the type of file to upload |
placeholder | string | '' | Default text to show in the button before to select a file |
height | string | '200px' | Set the height using the css syntax |
width | string | '200px' | Set the width using the css syntax |
requiredError | string | 'Required' | Message to show when the field is required and this haven't any file selected |
string | '' | ||
maxSizeExceededError | string | 'A file exceeds the limit size' | Message to show when a file exceeds the size limit |
dirty | boolean | false | Set the input as touched and show an error if apply |
filesUploadedChange | Event | ------- | Event fired when the file selected is updated |
Component that works like <select>
, added support to single or multi
select. This component can work with array of strings and array of objects.
Example:
<div class="card">
<div class="card-body">
<ngb-dropdown id="test2" name="test2" [(ngModel)]="test2" [options]="optionsBasic"></ngb-dropdown>
{{ test2 }}
</div>
</div>
<div class="card">
<div class="card-body">
<ngb-dropdown id="test3" name="test3" [(ngModel)]="test3" [options]="optionsComplex" optionLabel="label"></ngb-dropdown>
{{ test3 | json }}
</div>
</div>
<div class="card">
<div class="card-body">
<ngb-dropdown id="test4" name="test4" [(ngModel)]="test4" [options]="optionsComplex" optionLabel="label" optionValue="value"></ngb-dropdown>
{{ test4 }}
</div>
</div>
<div class="card">
<div class="card-body">
<ngb-dropdown id="test5" name="test5" [(ngModel)]="test5" [options]="optionsBasic" [multiple]="true"></ngb-dropdown>
{{ test5 | json }}
</div>
</div>
<div class="card">
<div class="card-body">
<ngb-dropdown id="test6" name="test6" [(ngModel)]="test6" [options]="optionsComplex" optionLabel="label" [multiple]="true"></ngb-dropdown>
{{ test6 | json }}
</div>
</div>
<div class="card">
<div class="card-body">
<ngb-dropdown id="test7" name="test7" [(ngModel)]="test7" [options]="optionsComplex" optionLabel="label" optionValue="value" [multiple]="true"></ngb-dropdown>
{{ test7 | json }}
</div>
</div>
@Component({
selector: 'foo',
templateUrl: 'foo.html'
})
export class YourComponent() {
public test2: any;
public test3: any;
public test4: any;
public test5: any;
public test6: any;
public test7: any;
public optionsBasic = [1, 2, 3, 4, 5];
public optionsComplex = [
{
value: '1',
label: 'One'
},
{
value: '2',
label: 'Two'
},
{
value: '3',
label: 'Three'
},
{
value: '4',
label: 'Four'
}
]
}
The attributes supported are:
Attribute | Type | Default | Description |
---|---|---|---|
id | string | '' | The HTML id for the element |
name | string | '' | The HTML name for the element |
required | boolean | false | Set this field as required |
disabled | boolean | false | Enabled or disabled this field |
label | string | '' | Label that sepecifics the type of option to select |
placeholder | string | '' | Default text to show in the dropdown before to select |
multiple | boolean | false | Define if the drop down will be single or multiple option |
optionLabel | string | '' | Define the attribute name to use to print the option label (used only for array of objects) |
optionValue | string | '' | Define the attribute name to use to set the ngModel value (used only for array of objects) |
requiredError | string | 'This field is required' | Message to show when the field is required and this haven't any option selected |
dirty | boolean | false | Set the input as touched and show an error if apply |
ngModel | any | null | The selected option* |
options | any[] | null | Array to populate the dropdown |
*When you select an option, the ngModel is setted with the element selected, if you use an object array and you set a value in the optionValue, the ngModel is setted with the value of the attribute from the object selected.
Finish documentation and examples