feat: automatically set input state based on control state

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

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
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,8 +42,6 @@ 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>

diff --git a/packages/platform/src/lib/signal-input.directive.ts b/packages/platform/src/lib/signal-input.directive.ts
@@ -1,7 +1,7 @@
-import {Directive, effect, inject, Input, OnInit} from '@angular/core';
-import {NgModel} from '@angular/forms';
-import {FormField} from './form-field';
-import {SIGNAL_INPUT_MODIFIER, SignalInputModifier} from "./signal-input-modifier.token";
+import { Directive, effect, inject, Input, OnInit } from '@angular/core';
+import { NgModel } from '@angular/forms';
+import { FormField } from './form-field';
+import { SIGNAL_INPUT_MODIFIER, SignalInputModifier } from "./signal-input-modifier.token";
 
 @Directive({
   selector: '[ngModel][formField]',
@@ -16,13 +16,16 @@ import {SIGNAL_INPUT_MODIFIER, SignalInputModifier} from "./signal-input-modifie
     '[class.ng-dirty]': 'this.formField?.dirtyState() === "DIRTY"',
     '[class.ng-touched]': 'this.formField?.touchedState() === "TOUCHED"',
     '[class.ng-untouched]': 'this.formField?.touchedState() === "UNTOUCHED"',
+    '[attr.disabled]': '!propagateState ? undefined : this.formField?.disabled() ? true : undefined',
+    '[attr.readonly]': '!propagateState ? undefined : this.formField?.readOnly() ? true : undefined',
   },
 })
 export class SignalInputDirective implements OnInit {
   private readonly modifiers = inject(SIGNAL_INPUT_MODIFIER, {optional: true}) as SignalInputModifier[] | null;
   private readonly model = inject(NgModel);
 
   @Input() formField: FormField | null = null;
+  @Input() propagateState = true;
 
   onModelChange(value: unknown) {
     if (this.modifiers && this.modifiers.length === 1) {