mgr/dashboard: Validate no added hosts in second step

Fixes https://tracker.ceph.com/issues/76195

Signed-off-by: Afreen Misbah <afreen@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts
index 3d43dac63101524e2605f297c39ddcb9a050d47a..f90b0fa275769a116d01de801d934a1dae41725f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts
@@ -38,9 +38,16 @@ export class NvmeofSubsystemsStepTwoComponent implements OnInit, TearsheetStep {
 
   ngOnInit() {
     this.createForm();
-    this.formGroup.get('hostType').valueChanges.subscribe(() => {
-      this.formGroup.get('hostname').updateValueAndValidity();
+
+    this.formGroup.get('hostType')?.valueChanges.subscribe(() => {
+      this.formGroup.get('hostname')?.updateValueAndValidity();
+    });
+
+    this.formGroup.get('addedHosts')?.valueChanges.subscribe(() => {
+      this.formGroup.get('hostname')?.updateValueAndValidity();
     });
+
+    this.formGroup.get('hostname')?.updateValueAndValidity();
   }
 
   isValidNQN = CdValidators.custom(
@@ -52,17 +59,16 @@ export class NvmeofSubsystemsStepTwoComponent implements OnInit, TearsheetStep {
     'duplicate',
     (input: string) =>
       !!input &&
-      (this.formGroup?.get('addedHosts')?.value.includes(input) ||
+      ((this.formGroup?.get('addedHosts')?.value ?? []).includes(input) ||
         this.existingHosts.includes(input))
   );
 
-  isRequired = CdValidators.custom(
-    'customRequired',
-    (input: string) =>
-      !input &&
-      this.addedHostsLength === 0 &&
-      this.formGroup?.get('hostType')?.value === this.HOST_TYPE.SPECIFIC
-  );
+  isRequired = CdValidators.custom('customRequired', (input: string) => {
+    const hostType = this.formGroup?.get('hostType')?.value;
+    const addedHosts = this.formGroup?.get('addedHosts')?.value ?? [];
+
+    return !input && addedHosts.length === 0 && hostType === this.HOST_TYPE.SPECIFIC;
+  });
 
   showRightInfluencer(): boolean {
     return this.formGroup.get('hostType')?.value === this.HOST_TYPE.SPECIFIC;
@@ -83,24 +89,25 @@ export class NvmeofSubsystemsStepTwoComponent implements OnInit, TearsheetStep {
     hostnameCtrl.markAsTouched();
     hostnameCtrl.updateValueAndValidity();
     if (hostnameCtrl.value && hostnameCtrl.valid) {
-      const addedHosts = this.formGroup.get('addedHosts').value;
+      const addedHosts = this.formGroup.get('addedHosts')?.value ?? [];
       const newHostList = [...addedHosts, hostnameCtrl.value];
       this.addedHostsLength = newHostList.length;
       this.formGroup.patchValue({
         addedHosts: newHostList,
         hostname: ''
       });
+      this.formGroup.get('hostname')?.updateValueAndValidity();
     }
   }
 
   removeHost(removedHost: string) {
-    const currentAddedHosts = this.formGroup.get('addedHosts').value;
+    const currentAddedHosts = this.formGroup.get('addedHosts')?.value ?? [];
     const newHostList = currentAddedHosts.filter((currentHost) => currentHost !== removedHost);
     this.addedHostsLength = newHostList.length;
     this.formGroup.patchValue({
       addedHosts: newHostList
     });
-    this.formGroup.get('hostname').updateValueAndValidity();
+    this.formGroup.get('hostname')?.updateValueAndValidity();
   }
 
   removeAll() {
@@ -108,6 +115,6 @@ export class NvmeofSubsystemsStepTwoComponent implements OnInit, TearsheetStep {
     this.formGroup.patchValue({
       addedHosts: []
     });
-    this.formGroup.get('hostname').updateValueAndValidity();
+    this.formGroup.get('hostname')?.updateValueAndValidity();
   }
 }