@next-level-integration/inputs
v10.0.8-beta
Published
Input angular components collection
Downloads
302
Readme
@next-level-integration/inputs
Install:
npm install @next-level-integration/inputs
Peer Requirements:
npm install angular2-text-mask --save
Importing:
import { NliInputsModule } from '@next-level-integration/inputs';
Add this to the styles:
.nli-primary {
color: mat-color($primary-color) !important;
}
.nli-accent {
color: mat-color($accent-color) !important;
}
.nli-warn {
color: mat-color($warn-color) !important;
}
.nli-primary-bg {
background-color: mat-color($primary-color) !important;
}
.nli-accent-bg {
background-color: mat-color($accent-color) !important;
}
.nli-warn-bg {
background-color: mat-color($warn-color) !important;
}
.nli-primary-border {
border-color: mat-color($primary-color) !important;
border-top-color: mat-color($primary-color) !important;
border-bottom-color: mat-color($primary-color) !important;
border-left-color: mat-color($primary-color) !important;
border-right-color: mat-color($primary-color) !important;
}
.nli-accent-border {
border-color: mat-color($accent-color) !important;
border-top-color: mat-color($accent-color) !important;
border-bottom-color: mat-color($accent-color) !important;
border-left-color: mat-color($accent-color) !important;
border-right-color: mat-color($accent-color) !important;
}
.nli-warn-border {
border-color: mat-color($warn-color) !important;
border-top-color: mat-color($warn-color) !important;
border-bottom-color: mat-color($warn-color) !important;
border-left-color: mat-color($warn-color) !important;
border-right-color: mat-color($warn-color) !important;
}
Usage (text)
HTML
<nli-text name="username"
[formControl]="loginForm.controls['username']"
inputLabel="Username"
inputClass="sample-input"
errorMsg="This field is mandatory.">
</nli-text>
TS
public loginForm!: FormGroup;
constructor(private fb: FormBuilder) {
this.loginForm = fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
Usage (password)
HTML
<nli-password name="password"
[formControl]="loginForm.controls['password']"
inputLabel="Password"
inputClass="sample-input"
errorMsg="This field is mandatory.">
</nli-password>
TS
public loginForm!: FormGroup;
constructor(private fb: FormBuilder) {
this.loginForm = fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
Usage (select)
HTML
<nli-select name="selectCity"
staticText="Please select a city"
inputLabel="City" [dataList]="citiesList"
inputClass="white-combo" [formControl]="testForm.controls['cities']">
</nli-select>
TS
public citiesList = [{
label: 'Cologne',
value: 'cologne'
},
{
label: 'Brasov',
value: 'brasov'
}];
public testForm!: FormGroup;
constructor(private fb: FormBuilder) {
this.testForm = fb.group({
cities: ['', Validators.required]
});
Usage (long text)
HTML
<nli-longText name="desc"
[formControl]="testForm.controls['desc']"
inputLabel="Description"
inputClass="sample-longText"
rows="5"
errorMsg="This field is mandatory">
</nli-longText>
TS
public testForm!: FormGroup;
constructor(private fb: FormBuilder) {
this.testForm = fb.group({
desc: ['', Validators.required]
});
Usage (file upload)
HTML
<nli-file-upload name="uploadPhoto"
inputLabel="Upload Photo"
[formControl]="testForm.controls['photo']"
(onFileUpload)="uploaded($event)">
</nli-file-upload>
TS
public testForm!: FormGroup;
constructor(private fb: FormBuilder) {
this.testForm = fb.group({
cities: ['', Validators.required]
});
}
uploaded(files: FileList) {
alert(`You have selected ${files[0].name}`);
}
Usage (time date picker)
HTML
<nli-timedatepicker name="timestamp" (change)="changeDate($event)"></nli-timedatepicker>
TS
public testForm!: FormGroup;
changeDate($event) {
console.log($event);
this.timestamp = $event;
}
Changelog:
- 1.0.0 Initial version
- 2.0.0 Moved from BrowserModule and BrowserAnimationsModule to CommonModule
- 2.1.0 Added autocomplete option to text ( expects array of strings )
- 3.0.0 Added nli-timedatepicker component ( testing phase )
- 3.0.1 timepicker bugfixes
- 3.0.2 timepicker bugfixes
- 3.1.0 timepicker uses 2 digits now
- 3.1.1 minor fix for 2 digits init
- 3.1.2 error css class fix