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