Skip to content

Commit e517167

Browse files
PowerKiKiPowerKiKi
committed
New errorMessage pipe to simplify error messages in templates #12015
Typical usage is without `@if`: ```html <mat-form-field> <input matInput formControlName="name" /> <mat-label i18n>Nom</mat-label> <mat-error>{{ form.get('name')?.errors | errorMessage }}</mat-error> </mat-form-field> ``` If you need custom error messages, you can override, or defined new ones like that: ```html <mat-form-field> <input matInput formControlName="name" /> <mat-label i18n>Nom</mat-label> @if (form.get('name')?.hasError('required')) { <mat-error>Ce champ est requis parce qu'il est vraiment très important</mat-error> } @else { <mat-error>{{ form.get('name')?.errors | errorMessage }}</mat-error> } </mat-form-field> ``` Supported validators are: - Angular - `Validators.max` - `Validators.maxlength` - `Validators.min` - `Validators.minlength` - `Validators.required` - Natural - `available` - `decimal` - `deliverableEmail` - `greaterThan` - `integer` - `money` - `nfcCardHex` - `time` - `unique` - `url` - Others, that live in individual projects, but we exceptionally support - `iban` - `validateCity`
1 parent b9264a1 commit e517167

35 files changed

+97
-202
lines changed

‎client/app/admin/comments/comment/comment.component.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,7 @@
1313
<mat-form-field>
1414
<textarea formControlName="description" matInput (change)="update()"></textarea>
1515
<mat-label>Commentaire</mat-label>
16-
@if (form.get('description')?.hasError('maxlength')) {
17-
<mat-error>
18-
Maximum {{ form.get('description')?.errors?.maxlength?.requiredLength }} caractères
19-
</mat-error>
20-
}
21-
@if (form.get('description')?.hasError('required')) {
22-
<mat-error>Requis</mat-error>
23-
}
16+
<mat-error>{{ form.get('description')?.errors | errorMessage }}</mat-error>
2417
</mat-form-field>
2518
</div>
2619

‎client/app/admin/comments/comment/comment.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {NaturalErrorMessagePipe} from '@ecodev/natural';
12
import {Component, inject, OnInit} from '@angular/core';
23
import {
34
NaturalAbstractDetail,
@@ -31,6 +32,7 @@ import {MatDivider} from '@angular/material/divider';
3132
MatFormField,
3233
MatLabel,
3334
MatError,
35+
NaturalErrorMessagePipe,
3436
MatInput,
3537
NaturalSelectComponent,
3638
NaturalStampComponent,

‎client/app/admin/events/event/event.component.html‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,40 +20,19 @@
2020
<mat-form-field>
2121
<input formControlName="name" matInput (change)="update()" />
2222
<mat-label>Nom</mat-label>
23-
@if (form.get('name')?.hasError('maxlength')) {
24-
<mat-error>
25-
Maximum {{ form.get('name')?.errors?.maxlength?.requiredLength }} caractères
26-
</mat-error>
27-
}
28-
@if (form.get('name')?.hasError('required')) {
29-
<mat-error>Requis</mat-error>
30-
}
23+
<mat-error>{{ form.get('name')?.errors | errorMessage }}</mat-error>
3124
</mat-form-field>
3225

3326
<mat-form-field>
3427
<input formControlName="place" matInput (change)="update()" />
3528
<mat-label>Lieu</mat-label>
36-
@if (form.get('place')?.hasError('maxlength')) {
37-
<mat-error>
38-
Maximum {{ form.get('place')?.errors?.maxlength?.requiredLength }} caractères
39-
</mat-error>
40-
}
41-
@if (form.get('place')?.hasError('required')) {
42-
<mat-error>Requis</mat-error>
43-
}
29+
<mat-error>{{ form.get('place')?.errors | errorMessage }}</mat-error>
4430
</mat-form-field>
4531

4632
<mat-form-field>
4733
<input formControlName="type" matInput (change)="update()" />
4834
<mat-label>Type</mat-label>
49-
@if (form.get('type')?.hasError('maxlength')) {
50-
<mat-error>
51-
Maximum {{ form.get('type')?.errors?.maxlength?.requiredLength }} caractères
52-
</mat-error>
53-
}
54-
@if (form.get('type')?.hasError('required')) {
55-
<mat-error>Requis</mat-error>
56-
}
35+
<mat-error>{{ form.get('type')?.errors | errorMessage }}</mat-error>
5736
</mat-form-field>
5837
</div>
5938

@@ -63,9 +42,7 @@
6342
<input formControlName="date" matInput [matDatepicker]="picker" (change)="update()" />
6443
<mat-datepicker-toggle matIconSuffix [for]="picker" />
6544
<mat-datepicker #picker />
66-
@if (form.get('date')?.hasError('required')) {
67-
<mat-error>Requis</mat-error>
68-
}
45+
<mat-error>{{ form.get('date')?.errors | errorMessage }}</mat-error>
6946
</mat-form-field>
7047
</div>
7148
</div>

‎client/app/admin/events/event/event.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {NaturalErrorMessagePipe} from '@ecodev/natural';
12
import {Component, inject, OnInit} from '@angular/core';
23
import {RouterLink} from '@angular/router';
34
import {
@@ -37,6 +38,7 @@ import {MatDivider} from '@angular/material/divider';
3738
MatFormField,
3839
MatLabel,
3940
MatError,
41+
NaturalErrorMessagePipe,
4042
MatSuffix,
4143
MatInput,
4244
MatDatepicker,

‎client/app/admin/facilitator-documents/facilitator-document/facilitator-document.component.html‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,12 @@
2020
<mat-form-field>
2121
<mat-label>Nom</mat-label>
2222
<input formControlName="name" matInput (change)="update()" />
23-
@if (form.get('name')?.hasError('maxlength')) {
24-
<mat-error>
25-
Maximum {{ form.get('name')?.errors?.maxlength?.requiredLength }} caractères
26-
</mat-error>
27-
}
28-
@if (form.get('name')?.hasError('required')) {
29-
<mat-error>Requis</mat-error>
30-
}
23+
<mat-error>{{ form.get('name')?.errors | errorMessage }}</mat-error>
3124
</mat-form-field>
3225
<mat-form-field>
3326
<mat-label>Rubrique</mat-label>
3427
<input formControlName="category" matInput (change)="update()" />
35-
@if (form.get('category')?.hasError('maxlength')) {
36-
<mat-error>
37-
Maximum {{ form.get('category')?.errors?.maxlength?.requiredLength }} caractères
38-
</mat-error>
39-
}
40-
@if (form.get('category')?.hasError('required')) {
41-
<mat-error>Requis</mat-error>
42-
}
28+
<mat-error>{{ form.get('category')?.errors | errorMessage }}</mat-error>
4329
</mat-form-field>
4430
</div>
4531

‎client/app/admin/facilitator-documents/facilitator-document/facilitator-document.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {NaturalErrorMessagePipe} from '@ecodev/natural';
12
import {Component, inject} from '@angular/core';
23
import {
34
NaturalAbstractDetail,
@@ -38,6 +39,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
3839
MatFormField,
3940
MatLabel,
4041
MatError,
42+
NaturalErrorMessagePipe,
4143
MatInput,
4244
NaturalFileComponent,
4345
MatDivider,

‎client/app/admin/newses/news/news.component.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,7 @@
2020
<mat-form-field>
2121
<input formControlName="name" matInput (change)="update()" />
2222
<mat-label>Nom</mat-label>
23-
@if (form.get('name')?.hasError('maxlength')) {
24-
<mat-error>
25-
Maximum {{ form.get('name')?.errors?.maxlength?.requiredLength }} caractères
26-
</mat-error>
27-
}
28-
@if (form.get('name')?.hasError('required')) {
29-
<mat-error>Requis</mat-error>
30-
}
23+
<mat-error>{{ form.get('name')?.errors | errorMessage }}</mat-error>
3124
</mat-form-field>
3225

3326
<mat-form-field>
@@ -55,9 +48,7 @@
5548
<input formControlName="date" matInput [matDatepicker]="picker" (change)="update()" />
5649
<mat-datepicker-toggle matIconSuffix [for]="picker" />
5750
<mat-datepicker #picker />
58-
@if (form.get('date')?.hasError('required')) {
59-
<mat-error>Requis</mat-error>
60-
}
51+
<mat-error>{{ form.get('date')?.errors | errorMessage }}</mat-error>
6152
</mat-form-field>
6253
</div>
6354
</div>

‎client/app/admin/newses/news/news.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {NaturalErrorMessagePipe} from '@ecodev/natural';
12
import {Component, inject, OnInit} from '@angular/core';
23
import {RouterLink} from '@angular/router';
34
import {
@@ -40,6 +41,7 @@ import {MatDivider} from '@angular/material/divider';
4041
MatFormField,
4142
MatLabel,
4243
MatError,
44+
NaturalErrorMessagePipe,
4345
MatSuffix,
4446
MatInput,
4547
CdkTextareaAutosize,

‎client/app/admin/order/order-line/order-line.component.html‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,7 @@ <h2 mat-dialog-title>{{ data.seo.title }}</h2>
2525
<mat-form-field [style.width.px]="90">
2626
<mat-label>Quantité</mat-label>
2727
<input formControlName="quantity" matInput step="1" type="number" [attr.min]="0" />
28-
@if (form.get('quantity')?.hasError('required')) {
29-
<mat-error>Requis</mat-error>
30-
}
31-
@if (form.get('quantity')?.hasError('integer')) {
32-
<mat-error>Doit être un nombre entier</mat-error>
33-
}
34-
@if (form.get('quantity')?.hasError('min')) {
35-
<mat-error>Valeur positive</mat-error>
36-
}
28+
<mat-error>{{ form.get('quantity')?.errors | errorMessage }}</mat-error>
3729
</mat-form-field>
3830

3931
<!-- Show only for products -->

‎client/app/admin/order/order-line/order-line.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {NaturalErrorMessagePipe} from '@ecodev/natural';
12
import {Component, inject, OnInit} from '@angular/core';
23
import {MatDialogModule} from '@angular/material/dialog';
34
import {
@@ -26,6 +27,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
2627
MatFormField,
2728
MatLabel,
2829
MatError,
30+
NaturalErrorMessagePipe,
2931
MatInput,
3032
NaturalSelectEnumComponent,
3133
MatButton,

0 commit comments

Comments
 (0)