Default Input-controls for Angular
This library gives default form control validations, so no need to write the code for default validations. you just need to import sls-default-controls library in your app.module.ts.
npm i sls-default-controls
import {SlsDefaultControlsModule} from 'sls-default-controls';
@NgModule({
declarations: [
...
],
imports: [
SlsDefaultControlsModule,
...
], ...
})
<sls-form [formGroup]="registerForm" (onSubmit)="onSubmit($event)">
// here sls-inputs
</sls-form>
registerForm = new FormGroup({
... // formControls
});
onSubmit(data:any){
if(data){ // if form is valid then data returns json object of form values
// your code
}
}
Attributes |
Descriptio |
controlName (require) |
For the specify the formControl name |
type |
For the specify the input type. and It's by default 'text'. |
label |
For adding input box lable |
inputclass |
For adding css class on input tag |
required |
For the specify is input box is required or not. by default is true. |
disable |
For the specify is input box is disable or not. by default is false. |
readonly |
For the specify is input box is readonly or not. by default is false. |
minLength |
For set min length of input value. By default it's 0. |
maxLength |
For set max length of input value. By default it's 200. |
min |
For require minimum number validation, and It's for only number type input |
max |
For require maximum number validation, and It's for only number type input |
pattern |
You can pass the custom pattern for input box and also set the custom pattern message by 'patternMsg' |
placeholder |
For set input box placeholder |
options |
It's For only select input type, you need to pass array or array of object. |
dataTextField |
For specifying the Array object display key property. |
dataValueField |
For specifying the Array object display value property. |
confirmPasswordWith |
For this you can match the input with specify input form control. |
patternMsg |
For display custom pattern message which for you pass pattern. |
requiredMsg |
For display custom Required message. |
lengthMsg |
For display Custom legnth message for minLenght and maxLenght. |
minMaxMsg |
It's for number type form control. display custom the min max number message. |
matchMsg |
For display custom message for Confirm password. |
default |
For set Default value of number type form control. |
Events |
Return |
onblur |
$event |
onchange |
$event |
onfocus |
$event |
onselect |
$event |
onkeydown |
$event |
onkeypress |
$event |
onkeyup |
$event |
- text
- password
- number
- email
- tel
- select
<sls-form [formGroup]="registerForm" (onSubmit)="onSubmit($event)">
<div class="row">
<sls-input class="col-6" label="First name" inputclass="form-control"
controlName="firstname"></sls-input>
<sls-input class="col-6" label="Last name" inputclass="form-control"
controlName="lastName"></sls-input>
<sls-input type="email" class="col-6" inputclass="form-control" label="Email" placeholder="Enter email address"
controlName="email"></sls-input>
<sls-input class="col-6" type="password" inputclass="form-control" label="Password"
controlName="password"></sls-input>
<sls-input class="col-6" type="password" inputclass="form-control" label="Confirm Password"
controlName="confirmpassword"
confirmPasswordWith="password"></sls-input>
<sls-input type="tel" inputclass="form-control" label="Mobile no" requireMsg="Please enter Mobile number."
class="col-6" controlName="mobile"></sls-input>
<sls-input type="number" class="col-6" inputclass="form-control" label="Age" [default]="30" [min]="18" [max]="55"
controlName="age"> </sls-input>
<sls-input type="select" label="City" class="col-6" (onselect)="select($event)" placeholder="Select City" controlName="city" inputclass="form-select" [options]="cityList" dataValueField="value" dataTextField="key"></sls-input>
<sls-input type="select" class="col-6 mt-4" (onselect)="select($event)" placeholder="Select Contry" controlName="contry" inputclass="form-select" [options]="contryList"></sls-input>
<sls-input class="col-6" inputclass="form-control" controlName="profileUrl" label="Profile Url" [pattern]="urlreg" patternMsg="Please enter valid profile URL."></sls-input>
<button class="btn btn-primary mt-3" type="submit">Submit</button>
</div>
</sls-form>
urlreg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
registerForm = new FormGroup({
firstname: new FormControl(),
lastName: new FormControl(),
email: new FormControl(),
password: new FormControl(),
confirmpassword: new FormControl(),
age: new FormControl(),
mobile: new FormControl(),
city : new FormControl(),
contry : new FormControl(),
profileUrl : new FormControl()
});
contryList = ["India","USA","UK"];
cityList = [
{key:'Ahemdabad', value:'ahemdabad'},
{key:'Baroda', value:'baroda'},
{key:'Anand', value:'anand'},
{key:'Nadiad', value:'nadiad'},
];
onSubmit(data : any){
if(data){
console.log('Submited data :',data);
}
}
blur(data : any){
console.log("blur : ",data);
}
change(data:any){
console.log("change : ",data);
}
focus(data:any){
console.log("focus : ",data);
}
keydown(data:any){
console.log("keydown : ",data);
}
keypress(data:any){
console.log("keypress : ",data);
}
keyup(data:any){
console.log("keyup : ",data);
}
select(data:any){
console.log("select : ",data);
}