Sls-default-controls NPM

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.

Online Demo

Installation

npm i sls-default-controls

sls-default-input

app.module.ts.

import {SlsDefaultControlsModule} from 'sls-default-controls';

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    SlsDefaultControlsModule,
    ...
  ], ...
})

.html

 <sls-form [formGroup]="registerForm" (onSubmit)="onSubmit($event)">
    // here sls-inputs
 </sls-form>

.ts

registerForm = new FormGroup({
    ... // formControls
});
onSubmit(data:any){
    if(data){ // if form is valid then data returns json object of form values
        // your code
    }
}

Attributes.

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.

Events	Return
onblur	$event
onchange	$event
onfocus	$event
onselect	$event
onkeydown	$event
onkeypress	$event
onkeyup	$event

sls-input types

text
password
number
email
tel
select

Example

app.component.html

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

app.component.ts

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);
  }