mgr/dashboard: Fix error message not displayed in pool form

Since the parent form-group was not assigned to any field and was never invalid,
the invalid-feedback element was never displayed.

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index 99b15a2b1b3f5155bff4eec3f3ae484929dab6fb..df17a756033f08c309b0bb97e365eb6901a8ae57 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -34,6 +34,10 @@
             <span class="invalid-feedback"
                   *ngIf="form.showError('name', formDir, 'uniqueName')"
                   i18n>The chosen Ceph pool name is already in use.</span>
+            <span *ngIf="form.showError('name', formDir, 'rbdPool')"
+                  class="invalid-feedback"
+                  i18n>It's not possible to create an RBD pool with '/' in the name.
+              Please change the name or remove 'rbd' from the applications list.</span>
           </div>
         </div>
 
@@ -471,17 +475,6 @@
                                      (changes)="currentConfigurationValues = $event()">
           </cd-rbd-configuration-form>
         </div>
-
-        <div class="form-group">
-          <div class="offset-sm-3 col-sm-9"
-               *ngIf="form.hasError('rbdPool')">
-            <br>
-            <span class="invalid-feedback"
-                  i18n>It's not possible to create an RBD pool with '/' in the name.</span>
-            <span class="invalid-feedback"
-                  i18n>Please change the name or remove 'rbd' from the applications list.</span>
-          </div>
-        </div>
       </div>
       <div class="card-footer">
         <div class="button-group text-right">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
index 29a43bf4b5950c2a0280bab96ce808e4383a96d3..e8a09a0d0547a95616f7a2e147e74d1c7a4ee215 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
@@ -117,7 +117,18 @@ export class PoolFormComponent implements OnInit {
     this.form = new CdFormGroup(
       {
         name: new FormControl('', {
-          validators: [Validators.pattern(/^[.A-Za-z0-9_/-]+$/), Validators.required]
+          validators: [
+            Validators.pattern(/^[.A-Za-z0-9_/-]+$/),
+            Validators.required,
+            CdValidators.custom('rbdPool', () => {
+              return (
+                this.form &&
+                this.form.getValue('name').includes('/') &&
+                this.data &&
+                this.data.applications.selected.indexOf('rbd') !== -1
+              );
+            })
+          ]
         }),
         poolType: new FormControl('', {
           validators: [Validators.required]
@@ -144,17 +155,7 @@ export class PoolFormComponent implements OnInit {
           validators: [Validators.min(0)]
         })
       },
-      [
-        CdValidators.custom('form', () => null),
-        CdValidators.custom('rbdPool', () => {
-          return (
-            this.form &&
-            this.form.getValue('name').includes('/') &&
-            this.data &&
-            this.data.applications.selected.indexOf('rbd') !== -1
-          );
-        })
-      ]
+      [CdValidators.custom('form', () => null)]
     );
   }
 
@@ -690,6 +691,6 @@ export class PoolFormComponent implements OnInit {
   }
 
   appSelection() {
-    this.form.updateValueAndValidity({ emitEvent: false, onlySelf: true });
+    this.form.get('name').updateValueAndValidity({ emitEvent: false, onlySelf: true });
   }
 }