Skip to content
This repository was archived by the owner on Jan 5, 2022. It is now read-only.

Commit c4357f9

Browse files
committed
Update documentation
1 parent c3ee3c5 commit c4357f9

File tree

1 file changed

+31
-3
lines changed

1 file changed

+31
-3
lines changed

README.md

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
An Angular module that makes Bootstrap form validation easy.
44

5-
[![Build Status](https://travis-ci.org/third774/ng-bootstrap-form-validation.svg?branch=master)](https://travis-ci.org/third774/ng-bootstrap-form-validation)
5+
[![Build Status](https://travis-ci.org/third774/ng-bootstrap-form-validation.svg?branch=master)](https://travis-ci.org/third774/ng-bootstrap-form-validation)
66
[![Dependencies](https://david-dm.org/third774/ng-bootstrap-form-validation.svg)](https://david-dm.org/third774/ng-bootstrap-form-validation.svg)
77
[![npm downloads](https://img.shields.io/npm/dm/ng-bootstrap-form-validation.svg)](http://npm-stat.com/charts.html?package=ng-bootstrap-form-validation)
88

@@ -30,7 +30,7 @@ import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
3030
BrowserModule,
3131
FormsModule,
3232
ReactiveFormsModule,
33-
NgBootstrapFormValidationModule.forRoot()
33+
NgBootstrapFormValidationModule.forRoot()
3434
],
3535
providers: [],
3636
bootstrap: [AppComponent]
@@ -114,6 +114,34 @@ export class BasicExampleComponent implements OnInit {
114114
</div>
115115
```
116116

117+
#### Custom error message placement
118+
119+
`basic-example.component.html`
120+
```html
121+
<div class="row">
122+
<div class="col-md-6 col-md-offset-3">
123+
<form class="form-horizontal" [formGroup]="formGroup" (validSubmit)="onSubmit()">
124+
<div class="form-group">
125+
<label class="control-label col-sm-2">Email</label>
126+
<div class="col-sm-10">
127+
<input type="text" class="form-control" formControlName="Email">
128+
<bfv-messages></bfv-messages>
129+
</div>
130+
</div>
131+
<div class="form-group">
132+
<label class="control-label col-sm-2">Password</label>
133+
<div class="col-sm-10">
134+
<input type="password" class="form-control" formControlName="Password">
135+
<bfv-messages></bfv-messages>
136+
</div>
137+
</div>
138+
<button class="btn btn-default" type="button" (click)="onReset()">Reset</button>
139+
<button class="btn btn-primary pull-right" type="submit">Submit</button>
140+
</form>
141+
</div>
142+
</div>
143+
```
144+
117145
## Custom Error Messages
118146

119147
### Global Custom Errors
@@ -175,7 +203,7 @@ export class AppModule {
175203

176204
In addition to providing custom errors at the top level using the `.forRoot()` method,
177205
you can provide custom error messages to a specific control by binding to the
178-
`customErrorMessages` directive on the `.form-group` element. Modifying the basic
206+
`customErrorMessages` directive on the `.form-group` element. Modifying the basic
179207
example above, we can provide a one time custom error message to a specific `.form-group`. Unlike the global custom error messages, these functions do not need to be individually exported.
180208

181209
`custom-error-example.component.ts`

0 commit comments

Comments
 (0)