[PM-2067] Update Folder Add-Edit modal to use the Component Library (#5648)

* Add formGroup to base FolderAddEditComponent

* [web] use DialogService to open the modal

* [web] migrate FolderAddEditComponent use component library

* [desktop] use the formGroup in the template

* [browser] use the formGroup in the template

* [browser & desktop] remove disable on form invalid

* [web] Migrate to async actions

* [web] Strengthen typing for FolderAddEdit dialog

* Show form error instead of error toast

* Move browser folder add edit component to vault

* Remove extra template variables

* Remove inner form

* Remove inner form

* Update apps/web/src/app/vault/individual-vault/folder-add-edit.component.html

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

apps/desktop/src/vault/app/vault/folder-add-edit.component.html

@@ -1,6 +1,12 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="folderAddEditTitle">
   <div class="modal-dialog modal-sm" role="document">
-    <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <form
+      #form
+      class="modal-content"
+      (ngSubmit)="submit()"
+      [appApiAction]="formPromise"
+      [formGroup]="formGroup"
+    >
       <div class="modal-body">
         <div class="box">
           <h1 class="box-header" id="folderAddEditTitle">
@@ -9,13 +15,7 @@
           <div class="box-content">
             <div class="box-content-row" appBoxRow>
               <label for="name">{{ "name" | i18n }}</label>
-              <input
-                id="name"
-                type="text"
-                name="Name"
-                [(ngModel)]="folder.name"
-                [appAutofocus]="!editMode"
-              />
+              <input id="name" type="text" formControlName="name" [appAutofocus]="!editMode" />
             </div>
           </div>
         </div>

apps/desktop/src/vault/app/vault/folder-add-edit.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
@@ -19,7 +20,8 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
     logService: LogService,
-    dialogService: DialogServiceAbstraction
+    dialogService: DialogServiceAbstraction,
+    formBuilder: FormBuilder
   ) {
     super(
       folderService,
@@ -27,7 +29,8 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
       i18nService,
       platformUtilsService,
       logService,
-      dialogService
+      dialogService,
+      formBuilder
     );
   }
 }