feat: add readOnly to form field

timdeschryver · Feb 3, 2024 · 99a0568 · 99a0568
1 parent c3577b3
commit 99a0568
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/apps/example/src/app/simple-form/simple-form.component.ts b/apps/example/src/app/simple-form/simple-form.component.ts
@@ -42,6 +42,8 @@ import { CustomErrorComponent } from '../custom-input-error.component';
           }}</small>
           <input
             ngModel
+            [disabled]="form.controls.passwords.controls.password.disabled()"
+            [readonly]="form.controls.passwords.controls.password.readOnly()"
             [formField]="form.controls.passwords.controls.password"
           />
         </div>
@@ -142,7 +144,9 @@ export default class SimpleFormComponent {
                 } characters or change '${pw().substring(0, 3)}' to rob`,
             },
           ],
-        }));
+          readOnly: () => username.value() === 'readonly',
+          disabled: () => username.value() === 'disabled',
+        }))
 
         return {
           password,

diff --git a/packages/platform/src/lib/form-field.ts b/packages/platform/src/lib/form-field.ts
@@ -35,6 +35,7 @@ export type FormField<Value = unknown> = {
   touched: Signal<boolean>;
   hidden: Signal<boolean>;
   disabled: Signal<boolean>;
+  readOnly: Signal<boolean>;
   markAsTouched: () => void;
   markAsDirty: () => void;
   reset: () => void;
@@ -46,6 +47,7 @@ export type FormFieldOptions = {
   validators?: Validator<any>[];
   hidden?: () => boolean;
   disabled?: () => boolean;
+  readOnly?: () => boolean;
 };
 export type FormFieldOptionsCreator<T> = (value: Signal<T>) => FormFieldOptions;
 
@@ -81,6 +83,7 @@ export function createFormField<Value>(
   const dirtySignal = computed(() => dirtyStateSignal() === 'DIRTY');
   const hiddenSignal = signal(false);
   const disabledSignal = signal(false);
+  const readOnlySignal = signal(false);
 
   effect(
     () => {
@@ -118,6 +121,18 @@ export function createFormField<Value>(
     );
   }
 
+  if (finalOptions?.readOnly) {
+    effect(
+      () => {
+        readOnlySignal.set(finalOptions!.readOnly!());
+      },
+      {
+        allowSignalWrites: true,
+        injector: injector,
+      }
+    );
+  }
+
   const defaultValue =
     typeof value === 'function' && isSignal(value) ? value() : value;
   let onReset = (_value: Value) => {};
@@ -135,6 +150,7 @@ export function createFormField<Value>(
     dirty: dirtySignal,
     hidden: hiddenSignal,
     disabled: disabledSignal,
+    readOnly: readOnlySignal,
     markAsTouched: () => touchedStateSignal.set('TOUCHED'),
     markAsDirty: () => dirtyStateSignal.set('DIRTY'),
     hasError: (errorKey: string) => !!errorsSignal()[errorKey],