Skip to content

Commit c372aa1

Browse files
Update the documentation
1 parent 2576d21 commit c372aa1

File tree

1 file changed

+34
-2
lines changed

1 file changed

+34
-2
lines changed

README.md

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,14 @@ Add the component that will display the messages to your HTML:
6464
<arv-validation-messages for="age"></arv-validation-messages>
6565
```
6666

67-
Make changes to the default styling of the validation messages when needed:
67+
Make changes to the styling of the validation messages when needed by using the `invalid-feedback` class. E.g.:
6868

6969
```scss
7070
.invalid-feedback {
7171
width: 100%;
7272
margin-top: .25rem;
7373
font-size: 80%;
74-
color: #dc3545;
74+
color: red;
7575
}
7676
```
7777

@@ -103,6 +103,30 @@ Or combining the two options above:
103103
Validators.minLength(() => this.getMinimumLength(), minLength => `The minimum length is ${minLength}.`)
104104
```
105105

106+
## Changing when validation messages are displayed
107+
108+
By default validation messages are displayed when the associated control is touched, or when the form has been submitted while the `ind-validation-messages` component was instantiated (meaning any hidden elements would not show their validation until a resubmit).
109+
110+
This implementation can be overridden by changing the module import as follows:
111+
112+
```ts
113+
import { ReactiveValidationModule } from 'angular-reactive-validation';
114+
115+
@NgModule({
116+
imports: [
117+
...,
118+
ReactiveValidationModule.forRoot({
119+
displayValidationMessageWhen: (control, formSubmitted) => {
120+
return true; // Replace with your implementation.
121+
}
122+
})
123+
]
124+
})
125+
export class AppModule { }
126+
```
127+
128+
Note that `formSubmitted` can be undefined when it's not known if the form is submitted, due to the form tag missing a formGroup attribute.
129+
106130
## Edge use cases
107131

108132
### Handling custom HTML validation messages
@@ -136,6 +160,14 @@ If the `arv-validation-messages`'s `for` attribute specifies multiple controls,
136160
</arv-validation-messages>
137161
```
138162

163+
Note that unlike the default Angular validation, parameterless functions need to be called to work properly:
164+
165+
```ts
166+
Validators.required()
167+
Validators.requiredTrue()
168+
Validators.email()
169+
```
170+
139171
### Using arv-validation-messages when not using `[formGroup]` or `formGroupName` attributes
140172

141173
Supplying FormControl instances instead of names is also supported:

0 commit comments

Comments
 (0)