Test on actual form

libs/vault/src/cipher-form/ciphers.ts

@@ -0,0 +1,130 @@
+import { FormControl, FormGroup } from "@angular/forms";
+
+import { CipherType } from "@bitwarden/common/vault/enums";
+
+import { SectionConfig } from "../form-builder/form-builder.component";
+
+export const CipherForms: Record<CipherType, SectionConfig[]> = {
+  [CipherType.Identity]: [
+    {
+      label: "Personal details",
+      items: [
+        // title: EncString;
+        {
+          label: "First name",
+          control: "text",
+          property: "firstName",
+        },
+        {
+          label: "Middle name",
+          control: "text",
+          property: "middleName",
+        },
+        {
+          label: "Last name",
+          control: "text",
+          property: "lastName",
+        },
+        {
+          label: "Username",
+          control: "text",
+          property: "username",
+        },
+        {
+          label: "Company",
+          control: "text",
+          property: "company",
+        },
+      ],
+    },
+    {
+      label: "Identification",
+      items: [
+        {
+          label: "Social Security number",
+          control: "text",
+          property: "ssn",
+        },
+        {
+          label: "Passport number",
+          control: "text",
+          property: "passportNumber",
+        },
+        {
+          label: "License number",
+          control: "text",
+          property: "licenseNumber",
+        },
+      ],
+    },
+    {
+      label: "Contact info",
+      items: [
+        {
+          label: "Email",
+          control: "text",
+          property: "email",
+        },
+        {
+          label: "Phone",
+          control: "text",
+          property: "phone",
+        },
+      ],
+    },
+    {
+      label: "Address",
+      items: [
+        {
+          label: "Address 1",
+          control: "text",
+          property: "address1",
+        },
+        {
+          label: "Address 2",
+          control: "text",
+          property: "address2",
+        },
+        {
+          label: "Address 3",
+          control: "text",
+          property: "address3",
+        },
+        {
+          label: "City / Town",
+          control: "text",
+          property: "city",
+        },
+        {
+          label: "State / Province",
+          control: "text",
+          property: "state",
+        },
+        {
+          label: "Zip / Postal code",
+          control: "text",
+          property: "postalCode",
+        },
+        {
+          label: "Country",
+          control: "text",
+          property: "country",
+        },
+      ],
+    },
+  ],
+  [CipherType.Login]: [],
+  [CipherType.SecureNote]: [],
+  [CipherType.Card]: [],
+  [CipherType.SshKey]: [],
+};
+
+export function cipherFormToFormGroup(config: SectionConfig[]): FormGroup {
+  const group = new FormGroup({});
+  config.forEach((section) => {
+    section.items.forEach((item) => {
+      group.addControl(item.property, new FormControl(""));
+    });
+  });
+  return group;
+}

libs/vault/src/cipher-form/components/cipher-form.component.html

@@ -6,27 +6,9 @@
       [originalCipherView]="originalCipherView"
     ></vault-item-details-section>
 
-    <vault-login-details-section
-      *ngIf="config.cipherType === CipherType.Login"
-    ></vault-login-details-section>
-
-    <vault-identity-section
-      *ngIf="config.cipherType === CipherType.Identity"
-      [disabled]="config.mode === 'partial-edit'"
-      [originalCipherView]="originalCipherView"
-    ></vault-identity-section>
-
-    <vault-card-details-section
-      *ngIf="config.cipherType === CipherType.Card"
-      [originalCipherView]="originalCipherView"
-      [disabled]="config.mode === 'partial-edit'"
-    ></vault-card-details-section>
-
-    <vault-sshkey-section
-      *ngIf="config.cipherType === CipherType.SshKey"
-      [disabled]="config.mode === 'partial-edit'"
-      [originalCipherView]="originalCipherView"
-    ></vault-sshkey-section>
+    @if (formGroup && formConfig) {
+      <vault-form-builder [config]="formConfig" [formGroup]="formGroup"></vault-form-builder>
+    }
 
     <vault-additional-options-section></vault-additional-options-section>
 

libs/vault/src/cipher-form/components/cipher-form.component.ts

@@ -35,9 +35,11 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 
+import { FormBuilderComponent, SectionConfig } from "../../form-builder/form-builder.component";
 import { CipherFormConfig } from "../abstractions/cipher-form-config.service";
 import { CipherFormService } from "../abstractions/cipher-form.service";
 import { CipherForm, CipherFormContainer } from "../cipher-form-container";
+import { CipherForms, cipherFormToFormGroup } from "../ciphers";
 import { CipherFormCacheService } from "../services/default-cipher-form-cache.service";
 
 import { AdditionalOptionsSectionComponent } from "./additional-options/additional-options-section.component";
@@ -76,6 +78,7 @@ import { SshKeySectionComponent } from "./sshkey-section/sshkey-section.componen
     NgIf,
     AdditionalOptionsSectionComponent,
     LoginDetailsSectionComponent,
+    FormBuilderComponent,
   ],
 })
 export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, CipherFormContainer {
@@ -84,6 +87,9 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
   private destroyRef = inject(DestroyRef);
   private _firstInitialized = false;
 
+  protected formConfig: SectionConfig[] = [];
+  protected formGroup?: FormGroup<any>;
+
   /**
    * The form ID to use for the form. Used to connect it to a submit button.
    */
@@ -225,6 +231,9 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
       return;
     }
 
+    this.formConfig = CipherForms[this.config.cipherType];
+    this.formGroup = cipherFormToFormGroup(this.formConfig);
+
     if (this.config.mode !== "add") {
       if (this.config.originalCipher == null) {
         throw new Error("Original cipher is required for edit or clone mode");

libs/vault/src/form-builder/builder-field.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
-import { AbstractControl, ReactiveFormsModule } from "@angular/forms";
+import { AbstractControl, FormControl, ReactiveFormsModule } from "@angular/forms";
 
 import { FormFieldModule, IconButtonModule } from "@bitwarden/components";
 
@@ -19,7 +19,7 @@ import { FormConfig } from "./form-builder.component";
 })
 export class FieldTextComponent {
   @Input({ required: true }) config!: FormConfig;
-  @Input({ required: true }) control!: AbstractControl<any>;
+  @Input({ required: true }) control!: FormControl<any>;
 
   constructor() {}
 }
@@ -38,7 +38,7 @@ export class FieldTextComponent {
 })
 export class FieldPasswordComponent {
   @Input({ required: true }) config!: FormConfig;
-  @Input({ required: true }) control!: AbstractControl<any>;
+  @Input({ required: true }) control!: FormControl<any>;
 
   constructor() {}
 }