From: Tiago Melo <tmelo@suse.com>
Date: Wed, 4 Sep 2019 10:58:27 +0000 (+0000)
Subject: mgr/dashboard: Fix error message not displayed in pool form
X-Git-Tag: v15.1.0~1588^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=02b4fc0a38d1dcf82a1da18a224df751ccc1ba04;p=ceph.git

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 99b15a2b1b3..df17a756033 100644
--- 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 29a43bf4b59..e8a09a0d054 100644
--- 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 });
   }
 }