SchoolTask/angular-js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

probleme entre address et codepostal pour le component html

Browse source
This commit is contained in:
ExostFlash 2025-03-04 18:20:56 +01:00
parent 9b60fd6602
commit ffe6e16754
3 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
angular/src/app/account/account.component.html
View file

@ -39,13 +39,19 @@
</div>
<div class="input-group mb-3" *ngIf="(infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched) ||
(infoForm.get('nameFirst')?.invalid && infoForm.get('nameFirst')?.touched)">
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched">
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.hasError('required') && infoForm.get('nameLast')?.touched">
Le nom est requis.
</div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.hasError('minlength') && infoForm.get('nameLast')?.touched">
Le nom doit comporter au moins 3 caractères.
</div>
<div class="alert alert-dark fs-40" role="alert"> — </div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.invalid && infoForm.get('nameFirst')?.touched">
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.hasError('required') && infoForm.get('nameFirst')?.touched">
Le prénom est requis.
</div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.hasError('minlength') && infoForm.get('nameFirst')?.touched">
Le prénom doit comporter au moins 3 caractères.
</div>
</div>
<!-- Email -->
@ -59,11 +65,25 @@
<!-- Adresse -->
<div class="input-group mb-3">
<span class="input-group-text">Adresse</span>
<textarea class="form-control" formControlName="address"></textarea>
<input type="text" formControlName="address" class="form-control" placeholder="Adresse">
<span class="input-group-text"> — </span>
<input type="text" formControlName="codePostal" class="form-control fs-20" placeholder="Code Postal">
</div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.invalid && infoForm.get('address')?.touched">
L'adresse est requise.
<div class="input-group mb-3" *ngIf="(infoForm.get('address')?.invalid && infoForm.get('address')?.touched) ||
(infoForm.get('codePostal')?.invalid && infoForm.get('codePostal')?.touched)">
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.hasError('required') && infoForm.get('address')?.touched">
L'adresse est requise.
</div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.hasError('minlength') && infoForm.get('address')?.touched">
L'adresse doit comporter au moins 10 caractères.
</div>
<div class="alert alert-dark fs-40" role="alert"> — </div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('codePostal')?.hasError('required') && infoForm.get('codePostal')?.touched">
Le code postal est requis.
</div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('codePostal')?.hasError('minlength') && infoForm.get('codePostal')?.touched">
Le code postal doit comporter au moins 4 chiffres.
</div>
</div>
<!-- Bouton Ajouter -->

1
angular/src/app/account/account.component.ts
View file

@ -19,6 +19,7 @@ export class AccountComponent {
nameFirst: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9._%+-]+$/)]],
address: ['', [Validators.required, Validators.minLength(10)]],
codePostal: ['', [Validators.required, Validators.minLength(4), Validators.pattern(/^0-9$/)]],
});
}

4
angular/src/styles.css
View file

@ -10,6 +10,10 @@
padding-bottom: 2px !important;
}
.fs-20 {
width: 5vw;
}
.breakWord {
word-break: break-word;
word-wrap: break-word;