sanchezvem/library-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added user's forms

Browse Source
This commit is contained in:
sanchezvem
2025-11-11 16:13:21 +01:00
parent 48b4c778ea
commit 09538712e7
10 changed files with 493 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/components/update-user/update-user.html
View File

@@ -1 +1,41 @@
<p>update-user works!</p>
<form nz-form nzLayout="horizontal" [formGroup]="updateUserForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-label nzSpan="8" nzRequired>
Nom
</nz-form-label>
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Vincent" formControlName="name">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="8" nzRequired>
Prénom
</nz-form-label>
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Bernard" formControlName="firstName">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="8" nzRequired>
Email
</nz-form-label>
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="bernard@vincent.fr" formControlName="email">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="8" nzRequired>
Anniversaire
</nz-form-label>
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="JJ/MM/AAAA" formControlName="birthDate">
</nz-form-control>
</nz-form-item>
</form>

32
src/app/components/update-user/update-user.ts
View File

@@ -1,11 +1,41 @@
import { Component } from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
@Component({
selector: 'app-update-user',
imports: [],
imports: [
FormsModule,
NzColDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
NzRowDirective,
ReactiveFormsModule
],
templateUrl: './update-user.html',
styleUrl: './update-user.css',
})
export class UpdateUser {
updateUserForm = new FormGroup({
name: new FormControl<string>(null, [Validators.required]),
firstName: new FormControl<string>(null, [Validators.required]),
email: new FormControl(null, [Validators.required]),
birthDate: new FormControl(null, [Validators.required]),
})
submitForm() {
// Pour annuler si le formulaire est invalide
if (this.updateUserForm.invalid) return;
// Pour obtenir la valeur du formulaire
console.log(this.updateUserForm.getRawValue())
// Pour vider le formulaire
this.updateUserForm.reset()
}
}