change value detection in input box

libs/design/input/examples/src/input-error/input-error.component.html

@@ -1,6 +1,11 @@
 <daff-form-field>
   <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" id="error-input"/>
   <label for="error-input">Label</label>
-  <div class="error">Error message goes here.</div>
+  @if (control.errors?.required) {
+    <daff-error-message>Email is a required field.</daff-error-message>
+  }
+  @if (control.errors?.email) {
+    <daff-error-message>Email is not valid.</daff-error-message>
+  }
 </daff-form-field>
 <p>Value: {{ control.value }} </p>

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html

@@ -1,5 +1,5 @@
 <daff-form-field>
-  <!-- <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" id="input" /> -->
-  <input daff-input type="text" name="email" [formControl]="control" id="input"/>
+  <!-- <input daff-input type="text" placeholder="Email" name="email" id="input" /> -->
+  <input daff-input type="text" name="email" id="input"/>
   <label for="input">Label</label>
 </daff-form-field>

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts

@@ -2,10 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import {
-  ReactiveFormsModule,
-  UntypedFormControl,
-} from '@angular/forms';
 
 import {
   DaffFormFieldModule,
@@ -18,8 +14,7 @@ import {
   templateUrl: './input-with-form-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffFormFieldModule, DaffInputModule, ReactiveFormsModule],
+  imports: [DaffFormFieldModule, DaffInputModule],
 })
 export class InputWithFormFieldComponent {
-  control: UntypedFormControl = new UntypedFormControl();
 }

libs/design/src/atoms/form/form-field/form-field-control.ts

@@ -11,12 +11,14 @@ import { NgControl } from '@angular/forms';
  * in javascript, they get thrown out by the typescript compiler and cannot
  * be used for the necessary dependency injection.
  */
-export abstract class DaffFormFieldControl {
+export abstract class DaffFormFieldControl<T> {
   readonly ngControl: NgControl | null;
 
   readonly controlType?: any;
 
   readonly focused: boolean;
 
   abstract focus(event?: Event): void;
+
+  readonly value: T;
 };

libs/design/src/atoms/form/form-field/form-field/form-field-theme.scss

@@ -34,12 +34,14 @@
 				}
 			}
 
-      &:has(input:disabled) {
+      &:has(*:disabled),
+      &:has(*.isDisabled) {
         border: 1px solid theming.daff-illuminate($base, $neutral, 4);
         color: theming.daff-illuminate($base, $neutral, 4);
       }
 
-      input:disabled {
+      *:disabled,
+      .isDisabled {
         background-color: transparent;
       }
 		}

libs/design/src/atoms/form/form-field/form-field/form-field.component.html

@@ -4,7 +4,6 @@
 	[class.daff-error]="isError"
 	[class.daff-valid]="isValid"
 	[class.daff-filled]="isFilled"
-	[class.daff-disabled]="isDisabled"
 >
 	<ng-content></ng-content>
 	<div
@@ -14,4 +13,6 @@
 		<fa-icon [icon]="faChevronDown"></fa-icon>
 	</div>
 </div>
-<ng-content select="daff-error-message"></ng-content>
+@if (_control?.ngControl?.touched) {
+  <ng-content select="daff-error-message"></ng-content>
+}

libs/design/src/atoms/form/form-field/form-field/form-field.component.spec.ts

@@ -33,7 +33,7 @@ describe('@daffodil/design | DaffFormFieldComponent | Usage', () => {
   let component: DaffFormFieldComponent;
   let fixture: ComponentFixture<WrapperComponent>;
   let formFieldControlElement: HTMLElement;
-  let control: DaffFormFieldControl;
+  let control: DaffFormFieldControl<unknown>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

libs/design/src/atoms/form/form-field/form-field/form-field.component.ts

@@ -21,7 +21,7 @@ import { DaffFormFieldMissingControlMessage } from '../form-field-errors';
   styleUrls: ['./form-field.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterContentChecked {
+export class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked {
 
   /**
    * @docs-private
@@ -44,7 +44,7 @@ export class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterC
    *
    * @docs-private
    */
-  @ContentChild(DaffFormFieldControl) _control: DaffFormFieldControl;
+  @ContentChild(DaffFormFieldControl) _control: DaffFormFieldControl<unknown>;
 
   /**
    * Tracking property to keep a record of whether or not the
@@ -64,12 +64,6 @@ export class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterC
    */
   isValid = false;
 
-  /**
-   * Tracking property to keep a record of whether or not the
-   * form field should be marked as disabled.
-   */
-  // isDisabled = false;
-
   /**
    * @docs
    *
@@ -79,23 +73,6 @@ export class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterC
     return this._control?.focused;
   }
 
-  /**
-   * Keeps the state of the form field consistent with its child DaffFormControl
-   *
-   * TODO: consider whether or not this can be refactored to some kind of
-   * observable to remove unnecessary change detection.
-   *
-   * @docs-private
-   */
-  ngDoCheck() {
-    if(this._control?.ngControl) {
-      this.isError = this._control.ngControl.errors && (this._control.ngControl.touched);
-      this.isValid = !this._control.ngControl.errors && this._control.ngControl.touched;
-      this.isFilled = !!this._control.ngControl.value;
-      // this.isDisabled = this._control.ngControl.disabled;
-    }
-  }
-
   /**
    * Validate whether or not the FormField is in
    * a "usable" state.
@@ -126,5 +103,10 @@ export class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterC
    */
   ngAfterContentChecked() {
     this._validateFormControl();
+    if(this._control?.ngControl) {
+      this.isError = this._control.ngControl.errors && (this._control.ngControl.touched);
+      this.isValid = !this._control.ngControl.errors && this._control.ngControl.touched;
+    }
+    this.isFilled = !!this._control.value;
   }
 }

libs/design/src/atoms/form/input/input.component.scss

@@ -14,4 +14,8 @@
 		box-shadow: none;
 		outline: none;
 	}
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }

libs/design/src/atoms/form/input/input.component.ts

@@ -25,7 +25,7 @@ import { DaffFormFieldControl } from '../form-field/form-field-control';
     { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
   ],
 })
-export class DaffInputComponent implements DaffFormFieldControl {
+export class DaffInputComponent implements DaffFormFieldControl<string> {
 
   /**
    * Has the form been submitted.
@@ -59,4 +59,8 @@ export class DaffInputComponent implements DaffFormFieldControl {
   onFocus() {
     this._elementRef.nativeElement.focus();
   }
+
+  get value() {
+    return this._elementRef.nativeElement.value;
+  }
 }

libs/design/src/atoms/form/native-select/native-select.component.ts

@@ -26,7 +26,7 @@ import { DaffFormFieldControl } from '../form-field/form-field-control';
   ],
 })
 
-export class DaffNativeSelectComponent implements DaffFormFieldControl {
+export class DaffNativeSelectComponent implements DaffFormFieldControl<string | number> {
   /**
    * @docs-private
    */
@@ -66,4 +66,7 @@ export class DaffNativeSelectComponent implements DaffFormFieldControl {
     this._elementRef.nativeElement.focus();
   }
 
+  get value() {
+    return this._elementRef.nativeElement.value;
+  }
 }

libs/design/src/atoms/form/quantity-field/quantity-field.component.ts

@@ -29,7 +29,7 @@ import { DaffFormFieldControl } from '../form-field/form-field-control';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffQuantityFieldComponent implements ControlValueAccessor, DaffFormFieldControl {
+export class DaffQuantityFieldComponent implements ControlValueAccessor, DaffFormFieldControl<number> {
 
   @ViewChild(DaffQuantityInputComponent) input: DaffQuantityInputComponent;
   @ViewChild(DaffQuantitySelectComponent) select: DaffQuantitySelectComponent;
@@ -139,4 +139,13 @@ export class DaffQuantityFieldComponent implements ControlValueAccessor, DaffFor
       this.input.focus();
     }
   }
+
+  get value() {
+    if(this.select) {
+      return this.select.value;
+    }
+    if(this.input) {
+      return this.input.value;
+    }
+  }
 }