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

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

@ -39,13 +39,19 @@
</div> </div>
<div class="input-group mb-3" *ngIf="(infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched) || <div class="input-group mb-3" *ngIf="(infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched) ||
(infoForm.get('nameFirst')?.invalid && infoForm.get('nameFirst')?.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. Le nom est requis.
</div> </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-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. Le prénom est requis.
</div> </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> </div>
<!-- Email --> <!-- Email -->
@ -59,13 +65,27 @@
<!-- Adresse --> <!-- Adresse -->
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text">Adresse</span> <input type="text" formControlName="address" class="form-control" placeholder="Adresse">
<textarea class="form-control" formControlName="address"></textarea> <span class="input-group-text"> — </span>
<input type="text" formControlName="codePostal" class="form-control fs-20" placeholder="Code Postal">
</div> </div>
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.invalid && infoForm.get('address')?.touched"> <div class="input-group mb-3" *ngIf="(infoForm.get('address')?.invalid && infoForm.get('address')?.touched) ||
L'adresse est requise. (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> </div>
<!-- Bouton Ajouter --> <!-- Bouton Ajouter -->
<button type="submit" class="btn btn-primary w-100" [disabled]="infoForm.invalid">Ajouter</button> <button type="submit" class="btn btn-primary w-100" [disabled]="infoForm.invalid">Ajouter</button>

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

@ -19,6 +19,7 @@ export class AccountComponent {
nameFirst: ['', [Validators.required, Validators.minLength(3)]], nameFirst: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9._%+-]+$/)]], email: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9._%+-]+$/)]],
address: ['', [Validators.required, Validators.minLength(10)]], 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; padding-bottom: 2px !important;
} }
.fs-20 {
width: 5vw;
}
.breakWord { .breakWord {
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;