bootstrap-validator-quick v0.0.1

Boostrap Validator

Valid your input bootstrap easy.

This package tries to make it easier to use forms using CDN or bootstrap package. Created directives easy to use.

Installation

OS X & Linux & Windows:

npm install bootstrap-validator-quick --save

Example Use

Now existing two directives

bs-validator

}

export class Validation { showValidationAfterTouched?= true; showValid?= false; }

export class ErrorConfig { showAsterisk?= true; }

### bs-input
<b>Label</br>

	<div class="form-group">
      <input 
      bs-input 
      id="name" 
      [label]="'labelName'"
      [placeholder]="'your name'" 
      formControlName="name" 
      type="text"
      >
    </div>

Example component using;

### Ts

import { Observable } from 'rxjs/Observable'; import { Component } from '@angular/core'; import { FormGroup } from '@angular/forms/src/model'; import { FormBuilder, AbstractControl, Validators } from '@angular/forms'; import { Http } from '@angular/http'; import { ValidatorFn, ValidationErrors } from '@angular/forms/src/directives/validators'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: './app.component.css' }) export class AppComponent { title = 'app';

form: FormGroup;

error = { name: { maxlength: 'Max length is 10' }, cool: { required: 'Field is required', email: 'Email not valid' }, select:{ required:'Select one, please' } }

constructor(formBuilder: FormBuilder, public http: Http) {

this.form = formBuilder.group({
  name: ['', Validators.maxLength(10)],
  cool: ['', Validators.compose([
    Validators.required,
    Validators.email
  ])],
  select: ['', Validators.required]
});

}

submit(e) { console.log(e); } }

### Html

<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <input bs-input bs-validator [label]="'Coooool!'" [errors]="error.cool" id="cool" [placeholder]="'cool?'" formControlName="cool" type="text" ngModel>
    </div>
  </div>
</div>


<select bs-input bs-validator [label]="'Selecione um cargo'" [errors]="error.select" formControlName="select" id="select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>



<br>
<button [disabled]="!form.valid" type="submit">Submit</button>

{{form.valid}} {{form.value | json}}

Configuration?

Simply call the module in App or not;

	import { BsModule } from './directive/bs-module';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        BsModule,
        ReactiveFormsModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

Contributing

1. Fork (https://github.com/raphaelkieling/bootstrap-validator-quick)
2. Create branch feature (git checkout -b feature/fooBar)
3. Commit (git commit -am 'Add some fooBar')
4. Push (git push origin feature/fooBar)
5. Create a new pull request