mgr/dashboard: Use forms in RGW bucket form

Signed-off-by: Stephan Müller <smueller@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
index 1682b433b7f17c6d770a14d890f07048f27e30bc..f0e4d163260d0e54c072a5964255c3dbceb44cb3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
@@ -58,7 +58,7 @@
 
         <!-- Name -->
         <div class="form-group"
-             [ngClass]="{'has-error': (frm.submitted || bucketForm.controls.bucket.dirty) && bucketForm.controls.bucket.invalid}">
+             [ngClass]="{'has-error': bucketForm.showError('bucket', frm)}">
           <label i18n
                  class="control-label col-sm-3"
                  for="bucket">Name
@@ -77,17 +77,17 @@
                    autofocus>
             <span i18n
                   class="help-block"
-                  *ngIf="(frm.submitted || bucketForm.controls.bucket.dirty) && bucketForm.controls.bucket.hasError('required')">
+                  *ngIf="bucketForm.showError('bucket', frm, 'required')">
               This field is required.
             </span>
             <span i18n
                   class="help-block"
-                  *ngIf="(frm.submitted || bucketForm.controls.bucket.dirty) && bucketForm.controls.bucket.hasError('bucketNameInvalid')">
+                  *ngIf="bucketForm.showError('bucket', frm, 'bucketNameInvalid')">
               The value is not valid.
             </span>
             <span i18n
                   class="help-block"
-                  *ngIf="(frm.submitted || bucketForm.controls.bucket.dirty) && bucketForm.controls.bucket.hasError('bucketNameExists')">
+                  *ngIf="bucketForm.showError('bucket', frm, 'bucketNameExists')">
               The chosen name is already in use.
             </span>
           </div>
@@ -95,7 +95,7 @@
 
         <!-- Owner -->
         <div class="form-group"
-             [ngClass]="{'has-error': (frm.submitted || bucketForm.controls.owner.dirty) && bucketForm.controls.owner.invalid}">
+             [ngClass]="{'has-error': bucketForm.showError('owner', frm)}">
           <label i18n
                  class="control-label col-sm-3"
                  for="owner">Owner
@@ -119,7 +119,7 @@
             </select>
             <span i18n
                   class="help-block"
-                  *ngIf="(frm.submitted || bucketForm.controls.owner.dirty) && bucketForm.controls.owner.hasError('required')">
+                  *ngIf="bucketForm.showError('owner', frm, 'required')">
               This field is required.
             </span>
           </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts
index 7801f3720d685943a50f6a7308c4aff1b3a36276..e8b812af4e84b098a7325802c5b8e60b356b0677 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts
@@ -1,18 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import {
-  AbstractControl,
-  AsyncValidatorFn,
-  FormBuilder,
-  FormGroup,
-  ValidationErrors,
-  Validators
-} from '@angular/forms';
+import { AbstractControl, AsyncValidatorFn, ValidationErrors, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import * as _ from 'lodash';
 
 import { RgwBucketService } from '../../../shared/api/rgw-bucket.service';
 import { RgwUserService } from '../../../shared/api/rgw-user.service';
+import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
+import { CdFormGroup } from '../../../shared/forms/cd-form-group';
 
 @Component({
   selector: 'cd-rgw-bucket-form',
@@ -20,16 +15,16 @@ import { RgwUserService } from '../../../shared/api/rgw-user.service';
   styleUrls: ['./rgw-bucket-form.component.scss']
 })
 export class RgwBucketFormComponent implements OnInit {
-  bucketForm: FormGroup;
+  bucketForm: CdFormGroup;
   editing = false;
   error = false;
   loading = false;
   owners = null;
 
   constructor(
-    private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
+    private formBuilder: CdFormBuilder,
     private rgwBucketService: RgwBucketService,
     private rgwUserService: RgwUserService
   ) {