mgr/dashboard: CdFormBuilder

Now the form builder can be used to build CdFormGroups.

Signed-off-by: Stephan Müller <[email protected]>

src/pybind/mgr/dashboard/frontend/src/app/shared/forms/cd-form-builder.spec.ts

@@ -0,0 +1,32 @@
+import { Validators } from '@angular/forms';
+import { CdFormBuilder } from './cd-form-builder';
+import { CdFormGroup } from './cd-form-group';
+
+describe('cd-form-builder', () => {
+  let service: CdFormBuilder;
+
+  beforeEach(() => {
+    service = new CdFormBuilder();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should create a nested CdFormGroup', () => {
+    const form = service.group({
+      nested: service.group({
+        a: [null],
+        b: ['sth'],
+        c: [2, [Validators.min(3)]]
+      }),
+      d: [{ e: 3 }],
+      f: [true]
+    });
+    expect(form.constructor).toBe(CdFormGroup);
+    expect(form instanceof CdFormGroup).toBeTruthy();
+    expect(form.getValue('b')).toBe('sth');
+    expect(form.getValue('d')).toEqual({ e: 3 });
+    expect(form.get('c').valid).toBeFalsy();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/forms/cd-form-builder.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+
+import { ServicesModule } from '../services/services.module';
+import { CdFormGroup } from './cd-form-group';
+
+/**
+ * CdFormBuilder extends FormBuilder to create an CdFormGroup based form.
+ */
+@Injectable({
+  providedIn: ServicesModule
+})
+export class CdFormBuilder extends FormBuilder {
+  group(
+    controlsConfig: { [key: string]: any },
+    extra: { [key: string]: any } | null = null
+  ): CdFormGroup {
+    const form = super.group(controlsConfig, extra);
+    return new CdFormGroup(form.controls, form.validator, form.asyncValidator);
+  }
+}