refactor: make forms reactive

uniplanWeb/src/app/features/faculty/faculty-add-form/faculty-add-form.html

@@ -1,19 +1,19 @@
 <app-add-form [title]="'faculty.add.title' | translate" (saveClicked)="save()">
-  <mat-dialog-content>
+  <mat-dialog-content [formGroup]="facultyForm">
 
     <mat-form-field appearance="fill">
       <mat-label>{{ 'features.name-label' | translate }}</mat-label>
-      <input matInput [(ngModel)]="facultyName" />
+      <input matInput formControlName="facultyName" />
     </mat-form-field>
 
     <mat-form-field appearance="fill">
       <mat-label>{{ 'features.location-label' | translate }}</mat-label>
-      <input matInput [(ngModel)]="location" />
+      <input matInput formControlName="location" />
     </mat-form-field>
 
     <mat-form-field appearance="fill">
       <mat-label>{{ 'faculty.uni-label' | translate }}</mat-label>
-      <mat-select [(ngModel)]="universityId">
+      <mat-select formControlName="universityId">
         @for (uni of universities; track uni) {
         <mat-option [value]="uni.id">
           {{uni.uniName}}

uniplanWeb/src/app/features/faculty/faculty-add-form/faculty-add-form.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { Component, OnInit, ChangeDetectionStrategy, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -20,7 +20,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatDialogModule,
     MatFormField,
     MatLabel,
-    FormsModule,
+    ReactiveFormsModule,
     MatInputModule,
     MatSelectModule,
     MatOptionModule,
@@ -32,9 +32,10 @@ import { TranslatePipe } from '@ngx-translate/core';
   styleUrl: './faculty-add-form.scss',
 })
 export class FacultyAddForm implements OnInit {
-  facultyName = '';
-  location = '';
-  universityId = '';
+  private formBuilder = inject(FormBuilder);
+
+  facultyForm!: FormGroup;
+
   universities: UniversityElm[] = [];
 
   constructor(
@@ -44,6 +45,8 @@ export class FacultyAddForm implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    this.initForm()
+
     this.universityService.getAllUniversities().subscribe({
       next: (data) => {
         this.universities = data;
@@ -54,21 +57,32 @@ export class FacultyAddForm implements OnInit {
     });
   }
 
-  save() {
-    if (!this.facultyName.trim()) {
+  private initForm() {
+    this.facultyForm = this.formBuilder.nonNullable
+    .group({
+      facultyName: ['', [Validators.required]],
+      location: ['', [Validators.required]],
+      universityId: ['', [Validators.required]]
+    });
+  }
+
+  save(): void {
+    const {facultyName, location, universityId} = this.facultyForm.value;
+
+    if (!facultyName.trim()) {
       alert('Please enter faculty name.');
       return;
     }
 
-    if (!this.location.trim()) {
+    if (!location.trim()) {
       alert('Please enter location.');
       return;
     }
 
     const newFaculty = {
-      universityId: this.universityId,
-      facultyName: this.facultyName,
-      location: this.location,
+      universityId: universityId,
+      facultyName: facultyName,
+      location: location,
     };
 
     this.facultyService.createFaculty(newFaculty).subscribe({

uniplanWeb/src/app/features/faculty/faculty-edit/faculty-edit.html → uniplanWeb/src/app/features/faculty/faculty-edit-form/faculty-edit-form.html

@@ -1,15 +1,15 @@
 <app-edit-form [title]="'faculty.edit.title' | translate" (saveClicked)="save()">
-    <mat-dialog-content>
+    <mat-dialog-content [formGroup]="facultyForm">
 
         <mat-form-field appearance="fill">
             <mat-label>{{ 'features.faculty-label' | translate }}</mat-label>
-            <input matInput [(ngModel)]="facultyName" />
+            <input matInput formControlName="facultyName" />
         </mat-form-field>
 
         <mat-form-field appearance="fill">
             <mat-label>{{ 'features.location-label' | translate }}</mat-label>
-            <input matInput [(ngModel)]="location" />
+            <input matInput formControlName="location" />
         </mat-form-field>
 
     </mat-dialog-content>
-</app-edit-form>
+</app-edit-form>