form add
This commit is contained in:
ExostFlash
parent
2b121c7ea0
commit
9b60fd6602
5 changed files with 102 additions and 68 deletions
|
|
@ -6,38 +6,70 @@
|
|||
<div class="card-body">
|
||||
<h4 class="card-title text-center mb-4">Ajouter vos informations</h4>
|
||||
|
||||
<form [formGroup]="infoForm" (ngSubmit)="addInfo()">
|
||||
|
||||
<!-- Sélection du genre -->
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input mt-0" type="radio" value="Mr." aria-label="Mr." [(ngModel)]="info.gender" name="gender" (change)="updateGender()">
|
||||
<input class="form-check-input mt-0" type="radio" formControlName="gender" value="Mr.">
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Mr." placeholder="Mr." disabled>
|
||||
<input type="text" class="form-control" placeholder="Mr." disabled>
|
||||
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input mt-0" type="radio" value="Ms." aria-label="Ms." [(ngModel)]="info.gender" name="gender" (change)="updateGender()">
|
||||
<input class="form-check-input mt-0" type="radio" formControlName="gender" value="Ms.">
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Ms." placeholder="Ms." disabled>
|
||||
<input type="text" class="form-control" placeholder="Ms." disabled>
|
||||
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input mt-0" type="radio" value="Other." aria-label="Othef=r." [(ngModel)]="info.gender" name="gender" (change)="updateGender()">
|
||||
<input class="form-check-input mt-0" type="radio" formControlName="gender" value="Other.">
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Other." placeholder="Other." disabled>
|
||||
<input type="text" class="form-control" placeholder="Other." disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('gender')?.invalid && infoForm.get('gender')?.touched">
|
||||
Veuillez sélectionner un genre.
|
||||
</div>
|
||||
|
||||
<!-- Nom & Prénom -->
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" [(ngModel)]="info.nameLast" class="form-control" placeholder="Last name" aria-label="Last name">
|
||||
<span class="input-group-text">@</span>
|
||||
<input type="text" [(ngModel)]="info.nameFirst" class="form-control" placeholder="First name" aria-label="First name">
|
||||
<input type="text" formControlName="nameLast" class="form-control" placeholder="Nom">
|
||||
<span class="input-group-text"> — </span>
|
||||
<input type="text" formControlName="nameFirst" class="form-control" placeholder="Prénom">
|
||||
</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">
|
||||
Le nom est requis.
|
||||
</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">
|
||||
Le prénom est requis.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" [(ngModel)]="info.email" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||||
<span class="input-group-text" id="basic-addon2">@edu.igensia.com</span>
|
||||
<input type="text" formControlName="email" class="form-control" placeholder="Nom d'utilisateur">
|
||||
<span class="input-group-text">@edu.igensia.com</span>
|
||||
</div>
|
||||
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('email')?.invalid && infoForm.get('email')?.touched">
|
||||
Veuillez entrer un nom d'utilisateur valide.
|
||||
</div>
|
||||
|
||||
<!-- Adresse -->
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Adresse</span>
|
||||
<textarea class="form-control" [(ngModel)]="info.address" aria-label="Adresse"></textarea>
|
||||
<textarea class="form-control" formControlName="address"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100" (click)="addInfo()">Ajouter</button>
|
||||
<div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.invalid && infoForm.get('address')?.touched">
|
||||
L'adresse est requise.
|
||||
</div>
|
||||
|
||||
<!-- Bouton Ajouter -->
|
||||
<button type="submit" class="btn btn-primary w-100" [disabled]="infoForm.invalid">Ajouter</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-account',
|
||||
|
|
@ -8,44 +9,39 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
|
||||
export class AccountComponent {
|
||||
info: Info = new Info();
|
||||
infos: Array<Info> = [];
|
||||
newInfo: boolean = false;
|
||||
infoForm: FormGroup;
|
||||
infos: any[] = [];
|
||||
|
||||
constructor() {}
|
||||
ngOnInit(): void {}
|
||||
constructor(private fb: FormBuilder) {
|
||||
this.infoForm = this.fb.group({
|
||||
gender: ['', Validators.required],
|
||||
nameLast: ['', [Validators.required, Validators.minLength(3)]],
|
||||
nameFirst: ['', [Validators.required, Validators.minLength(3)]],
|
||||
email: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9._%+-]+$/)]],
|
||||
address: ['', [Validators.required, Validators.minLength(10)]],
|
||||
});
|
||||
}
|
||||
|
||||
addInfo() {
|
||||
if (this.info.gender && this.info.nameFirst && this.info.nameLast && this.info.email && this.info.address) {
|
||||
this.info.date = new Date();
|
||||
this.info.nameFirst = this.info.nameFirst.charAt(0).toUpperCase() + this.info.nameFirst.slice(1).toLowerCase()
|
||||
this.infos.push({
|
||||
gender: this.info.gender,
|
||||
nameFirst: this.info.nameFirst,
|
||||
nameLast: this.info.nameLast.toUpperCase(),
|
||||
email: this.info.email.toLowerCase() + '@edu.igensia.com',
|
||||
address: this.info.address,
|
||||
date: this.info.date
|
||||
})
|
||||
this.info.nameFirst = '';
|
||||
this.info.nameLast = '';
|
||||
this.info.email = '';
|
||||
this.info.address = '';
|
||||
this.info.gender = '';
|
||||
}
|
||||
}
|
||||
if (this.infoForm.valid) {
|
||||
const formData = this.infoForm.value;
|
||||
|
||||
updateGender() {
|
||||
// console.log("Le genre sélectionné est :", this.info.gender);
|
||||
}
|
||||
// Ajouter @edu.igensia.com automatiquement
|
||||
const email = formData.email.toLowerCase();
|
||||
const fullEmail = `${email}@edu.igensia.com`;
|
||||
const nameLast = formData.nameLast.toUpperCase();
|
||||
const nameFirst = formData.nameFirst.charAt(0).toUpperCase() + formData.nameFirst.slice(1).toLowerCase();
|
||||
|
||||
}
|
||||
|
||||
export class Info {
|
||||
gender: string = '';
|
||||
nameFirst: string = '';
|
||||
nameLast: string = '';
|
||||
email: string = '';
|
||||
address: string= '';
|
||||
date: Date | null = null;
|
||||
const newInfo = {
|
||||
...formData,
|
||||
nameLast: nameLast, // Mettre l'email complet
|
||||
nameFirst: nameFirst, // Mettre l'email complet
|
||||
email: fullEmail, // Mettre l'email complet
|
||||
date: new Date() // Ajoute la date actuelle
|
||||
};
|
||||
|
||||
this.infos.push(newInfo);
|
||||
this.infoForm.reset(); // Réinitialise le formulaire après l'ajout
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
|
|||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AboutComponent } from './about/about.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { ContactsComponent } from './contacts/contacts.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { NavBarComponent } from './nav-bar/nav-bar.component';
|
||||
|
|
@ -22,7 +22,8 @@ import { AccountComponent } from './account/account.component';
|
|||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
FormsModule
|
||||
FormsModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@
|
|||
border-bottom: 2px solid #ffc107;
|
||||
}
|
||||
|
||||
.fs-40 {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.breakWord {
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
|
|
|
|||
BIN
formation_angular_session2_04032025.pptx
Normal file
BIN
formation_angular_session2_04032025.pptx
Normal file
Binary file not shown.
Loading…
Add table
Reference in a new issue