bootstrap-validator-quick
v0.0.1
Published
> Valid your input bootstrap easy.
Downloads
11
Readme
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
- Fork (https://github.com/raphaelkieling/bootstrap-validator-quick)
- Create branch feature (
git checkout -b feature/fooBar
) - Commit (
git commit -am 'Add some fooBar'
) - Push (
git push origin feature/fooBar
) - Create a new pull request