feat: use FormBuilder for access form

apps/api/src/app/access/create-access.dto.ts

@@ -8,4 +8,8 @@ export class CreateAccessDto {
   @IsOptional()
   @IsString()
   granteeUserId?: string;
+
+  @IsOptional()
+  @IsString()
+  type?: string;
 }

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -4,7 +4,9 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
 import { Subject } from 'rxjs';
 
 import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
@@ -17,19 +19,36 @@ import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
   templateUrl: 'create-or-update-access-dialog.html'
 })
 export class CreateOrUpdateAccessDialog implements OnDestroy {
+  public accessForm: FormGroup;
+
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccessDialogParams,
     public dialogRef: MatDialogRef<CreateOrUpdateAccessDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccessDialogParams
+    private formBuilder: FormBuilder
   ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.accessForm = this.formBuilder.group({
+      alias: [this.data.access.alias],
+      type: [this.data.access.type, Validators.required]
+    });
+  }
 
   public onCancel() {
     this.dialogRef.close();
   }
 
+  public onSubmit() {
+    const access: CreateAccessDto = {
+      alias: this.accessForm.controls['alias'].value,
+      type: this.accessForm.controls['type'].value
+    };
+
+    this.dialogRef.close({ access });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -1,35 +1,39 @@
-<form #addAccessForm="ngForm" class="d-flex flex-column h-100">
-  <h1 i18n mat-dialog-title>Grant access</h1>
-  <div class="flex-grow-1 py-3" mat-dialog-content>
-    <div>
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Alias</mat-label>
-        <input
-          matInput
-          name="alias"
-          type="text"
-          [(ngModel)]="data.access.alias"
-        />
-      </mat-form-field>
+<form
+  class="d-flex flex-column h-100"
+  [formGroup]="accessForm"
+  (keyup.enter)="accessForm.valid && onSubmit()"
+  (ngSubmit)="onSubmit()"
+>
+    <h1 i18n mat-dialog-title>Grant access</h1>
+    <div class="flex-grow-1 py-3" mat-dialog-content>
+      <div>
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Alias</mat-label>
+          <input
+            formControlName="alias"
+            matInput
+            type="text"
+          />
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Type</mat-label>
+          <mat-select formControlName="type">
+            <mat-option i18n value="PUBLIC">Public</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
     </div>
-    <div>
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Type</mat-label>
-        <mat-select name="type" required [(value)]="data.access.type">
-          <mat-option i18n value="PUBLIC">Public</mat-option>
-        </mat-select>
-      </mat-form-field>
+    <div class="justify-content-end" mat-dialog-actions>
+      <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>
+      <button
+        color="primary"
+        mat-flat-button
+        type="submit"
+        [disabled]="!accessForm.valid"
+      >
+        <ng-container i18n>Save</ng-container>
+      </button>
     </div>
-  </div>
-  <div class="justify-content-end" mat-dialog-actions>
-    <button i18n mat-button (click)="onCancel()">Cancel</button>
-    <button
-      color="primary"
-      mat-flat-button
-      [disabled]="!addAccessForm.form.valid"
-      [mat-dialog-close]="data"
-    >
-      <ng-container i18n>Save</ng-container>
-    </button>
-  </div>
 </form>