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

form add

Browse source
This commit is contained in:
ExostFlash 2025-03-04 15:56:38 +01:00
parent 2b121c7ea0
commit 9b60fd6602
5 changed files with 102 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,38 +6,70 @@
<div class="card-body"> <div class="card-body">
<h4 class="card-title text-center mb-4">Ajouter vos informations</h4> <h4 class="card-title text-center mb-4">Ajouter vos informations</h4>
<div class="input-group mb-3"> <form [formGroup]="infoForm" (ngSubmit)="addInfo()">
<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()">
</div>
<input type="text" class="form-control" aria-label="Mr." placeholder="Mr." disabled>
<div class="input-group-text"> <!-- Sélection du genre -->
<input class="form-check-input mt-0" type="radio" value="Ms." aria-label="Ms." [(ngModel)]="info.gender" name="gender" (change)="updateGender()"> <div class="input-group mb-3">
</div> <div class="input-group">
<input type="text" class="form-control" aria-label="Ms." placeholder="Ms." disabled> <div class="input-group-text">
<input class="form-check-input mt-0" type="radio" formControlName="gender" value="Mr.">
</div>
<input type="text" class="form-control" placeholder="Mr." disabled>
<div class="input-group-text"> <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="Ms.">
</div>
<input type="text" class="form-control" placeholder="Ms." disabled>
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" formControlName="gender" value="Other.">
</div>
<input type="text" class="form-control" placeholder="Other." disabled>
</div> </div>
<input type="text" class="form-control" aria-label="Other." placeholder="Other." disabled>
</div> </div>
</div> <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('gender')?.invalid && infoForm.get('gender')?.touched">
<div class="input-group mb-3"> Veuillez sélectionner un genre.
<input type="text" [(ngModel)]="info.nameLast" class="form-control" placeholder="Last name" aria-label="Last name"> </div>
<span class="input-group-text">&#64;</span>
<input type="text" [(ngModel)]="info.nameFirst" class="form-control" placeholder="First name" aria-label="First name"> <!-- Nom & Prénom -->
</div> <div class="input-group mb-3">
<div class="input-group mb-3"> <input type="text" formControlName="nameLast" class="form-control" placeholder="Nom">
<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"> — </span>
<span class="input-group-text" id="basic-addon2">&#64;edu.igensia.com</span> <input type="text" formControlName="nameFirst" class="form-control" placeholder="Prénom">
</div> </div>
<div class="input-group mb-3"> <div class="input-group mb-3" *ngIf="(infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched) ||
<span class="input-group-text">Adresse</span> (infoForm.get('nameFirst')?.invalid && infoForm.get('nameFirst')?.touched)">
<textarea class="form-control" [(ngModel)]="info.address" aria-label="Adresse"></textarea> <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched">
</div> Le nom est requis.
<button type="submit" class="btn btn-primary w-100" (click)="addInfo()">Ajouter</button> </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" formControlName="email" class="form-control" placeholder="Nom d'utilisateur">
<span class="input-group-text">&#64;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" formControlName="address"></textarea>
</div>
<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> </div>
</div> </div>

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({ @Component({
selector: 'app-account', selector: 'app-account',
@ -8,44 +9,39 @@ import { Component } from '@angular/core';
}) })
export class AccountComponent { export class AccountComponent {
info: Info = new Info(); infoForm: FormGroup;
infos: Array<Info> = []; infos: any[] = [];
newInfo: boolean = false;
constructor() {} constructor(private fb: FormBuilder) {
ngOnInit(): void {} 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() { addInfo() {
if (this.info.gender && this.info.nameFirst && this.info.nameLast && this.info.email && this.info.address) { if (this.infoForm.valid) {
this.info.date = new Date(); const formData = this.infoForm.value;
this.info.nameFirst = this.info.nameFirst.charAt(0).toUpperCase() + this.info.nameFirst.slice(1).toLowerCase()
this.infos.push({ // Ajouter @edu.igensia.com automatiquement
gender: this.info.gender, const email = formData.email.toLowerCase();
nameFirst: this.info.nameFirst, const fullEmail = `${email}@edu.igensia.com`;
nameLast: this.info.nameLast.toUpperCase(), const nameLast = formData.nameLast.toUpperCase();
email: this.info.email.toLowerCase() + '@edu.igensia.com', const nameFirst = formData.nameFirst.charAt(0).toUpperCase() + formData.nameFirst.slice(1).toLowerCase();
address: this.info.address,
date: this.info.date const newInfo = {
}) ...formData,
this.info.nameFirst = ''; nameLast: nameLast, // Mettre l'email complet
this.info.nameLast = ''; nameFirst: nameFirst, // Mettre l'email complet
this.info.email = ''; email: fullEmail, // Mettre l'email complet
this.info.address = ''; date: new Date() // Ajoute la date actuelle
this.info.gender = ''; };
this.infos.push(newInfo);
this.infoForm.reset(); // Réinitialise le formulaire après l'ajout
} }
} }
updateGender() {
// console.log("Le genre sélectionné est :", this.info.gender);
}
}
export class Info {
gender: string = '';
nameFirst: string = '';
nameLast: string = '';
email: string = '';
address: string= '';
date: Date | null = null;
} }

5
angular/src/app/app.module.ts
View file

@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.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 { ContactsComponent } from './contacts/contacts.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { NavBarComponent } from './nav-bar/nav-bar.component'; import { NavBarComponent } from './nav-bar/nav-bar.component';
@ -22,7 +22,8 @@ import { AccountComponent } from './account/account.component';
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
FormsModule FormsModule,
ReactiveFormsModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

5
angular/src/styles.css
View file

@ -5,6 +5,11 @@
border-bottom: 2px solid #ffc107; border-bottom: 2px solid #ffc107;
} }
.fs-40 {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
.breakWord { .breakWord {
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;

BIN
formation_angular_session2_04032025.pptx Normal file
View file

Binary file not shown.