src/app/health/health-update.component.ts (fixes #9288)

src/app/health/health-update.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, HostListener } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { CustomValidators } from '../validators/custom-validators';
 import { ValidatorService } from '../validators/validator.service';
 import { UserService } from '../shared/user.service';
@@ -13,22 +13,44 @@ import { warningMsg } from '../shared/unsaved-changes.component';
 import { interval, of, race } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 
+interface ProfileForm {
+  name: FormControl<string>;
+  firstName: FormControl<string>;
+  middleName: FormControl<string>;
+  lastName: FormControl<string>;
+  email: FormControl<string>;
+  language: FormControl<string>;
+  phoneNumber: FormControl<string>;
+  birthDate: FormControl<string>;
+  birthplace: FormControl<string>;
+}
+
+interface HealthForm {
+  emergencyContactName: FormControl<string>;
+  emergencyContactType: FormControl<string>;
+  emergencyContact: FormControl<string>;
+  specialNeeds: FormControl<string>;
+  immunizations: FormControl<string>;
+  allergies: FormControl<string>;
+  notes: FormControl<string>;
+}
+
 @Component({
   templateUrl: './health-update.component.html',
   styleUrls: [ './health-update.scss' ]
 })
 export class HealthUpdateComponent implements OnInit, CanComponentDeactivate {
 
-  profileForm: UntypedFormGroup;
-  healthForm: UntypedFormGroup;
+  profileForm: FormGroup<ProfileForm>;
+  healthForm: FormGroup<HealthForm>;
   existingData: any = {};
   languages = languages;
   minBirthDate: Date = this.userService.minBirthDate;
   initialFormValues: any;
   hasUnsavedChanges = false;
 
   constructor(
-    private fb: UntypedFormBuilder,
+    private fb: FormBuilder,
     private validatorService: ValidatorService,
     private userService: UserService,
     private healthService: HealthService,
@@ -83,32 +105,31 @@ export class HealthUpdateComponent implements OnInit, CanComponentDeactivate {
   }
 
   initProfileForm() {
-    this.profileForm = this.fb.group({
-      name: '',
-      firstName: [ '', CustomValidators.required ],
-      middleName: '',
-      lastName: [ '', CustomValidators.required ],
-      email: [ '', [ Validators.required, Validators.email ] ],
-      language: [ '', Validators.required ],
-      phoneNumber: [ '', CustomValidators.required ],
-      birthDate: [
-        '',
-        CustomValidators.dateValidRequired,
-        ac => this.validatorService.notDateInFuture$(ac)
-      ],
-      birthplace: ''
+    this.profileForm = this.fb.nonNullable.group<ProfileForm>({
+      name: this.fb.nonNullable.control(''),
+      firstName: this.fb.nonNullable.control('', { validators: CustomValidators.required }),
+      middleName: this.fb.nonNullable.control(''),
+      lastName: this.fb.nonNullable.control('', { validators: CustomValidators.required }),
+      email: this.fb.nonNullable.control('', { validators: [ Validators.required, Validators.email ] }),
+      language: this.fb.nonNullable.control('', { validators: Validators.required }),
+      phoneNumber: this.fb.nonNullable.control('', { validators: CustomValidators.required }),
+      birthDate: this.fb.nonNullable.control('', {
+        validators: CustomValidators.dateValidRequired,
+        asyncValidators: ac => this.validatorService.notDateInFuture$(ac)
+      }),
+      birthplace: this.fb.nonNullable.control('')
     });
   }
 
   initHealthForm() {
-    this.healthForm = this.fb.group({
-      emergencyContactName: '',
-      emergencyContactType: '',
-      emergencyContact: '',
-      specialNeeds: '',
-      immunizations: '',
-      allergies: '',
-      notes: ''
+    this.healthForm = this.fb.nonNullable.group<HealthForm>({
+      emergencyContactName: this.fb.nonNullable.control(''),
+      emergencyContactType: this.fb.nonNullable.control(''),
+      emergencyContact: this.fb.nonNullable.control(''),
+      specialNeeds: this.fb.nonNullable.control(''),
+      immunizations: this.fb.nonNullable.control(''),
+      allergies: this.fb.nonNullable.control(''),
+      notes: this.fb.nonNullable.control('')
     });
     this.healthForm.controls.emergencyContactType.valueChanges.subscribe(value => {
       this.healthForm.controls.emergencyContact.setValidators(value === 'email' ? Validators.email : null);