bootstrap-validator-quick

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

Errors
``` error = { name: { maxlength: 'Max length is 10', required: 'Message to show in the element error' } } ```
Config ``` export class ConfigValidator { error = new ErrorConfig(); validation = new Validation();

}

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

Template form-control simple bootstrap

<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