|
2 | 2 |
|
3 | 3 | An Angular module that makes Bootstrap form validation easy. |
4 | 4 |
|
5 | | -[](https://travis-ci.org/third774/ng-bootstrap-form-validation) |
| 5 | +[](https://travis-ci.org/third774/ng-bootstrap-form-validation) |
6 | 6 | [](https://david-dm.org/third774/ng-bootstrap-form-validation.svg) |
7 | 7 | [](http://npm-stat.com/charts.html?package=ng-bootstrap-form-validation) |
8 | 8 |
|
@@ -30,7 +30,7 @@ import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation'; |
30 | 30 | BrowserModule, |
31 | 31 | FormsModule, |
32 | 32 | ReactiveFormsModule, |
33 | | - NgBootstrapFormValidationModule.forRoot() |
| 33 | + NgBootstrapFormValidationModule.forRoot() |
34 | 34 | ], |
35 | 35 | providers: [], |
36 | 36 | bootstrap: [AppComponent] |
@@ -114,6 +114,34 @@ export class BasicExampleComponent implements OnInit { |
114 | 114 | </div> |
115 | 115 | ``` |
116 | 116 |
|
| 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 | + |
117 | 145 | ## Custom Error Messages |
118 | 146 |
|
119 | 147 | ### Global Custom Errors |
@@ -175,7 +203,7 @@ export class AppModule { |
175 | 203 |
|
176 | 204 | In addition to providing custom errors at the top level using the `.forRoot()` method, |
177 | 205 | 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 |
179 | 207 | 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. |
180 | 208 |
|
181 | 209 | `custom-error-example.component.ts` |
|
0 commit comments