NgbInput

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

Installation

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 { }

NgbInputComponent

Example to use

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

NgbFileComponent

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
invalidTypeError	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

NgbDropDownComponent

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.

Todo

Finish documentation and examples