feat: create form validity directive

projects/forge-angular/src/lib/form-validity/form-validity.directive.ts

@@ -0,0 +1,73 @@
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, Renderer2 } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { startWith, Subject, takeUntil } from 'rxjs';
+
+@Directive({
+  selector: '[forgeFormValidity]'
+})
+export class FormValidityDirective implements AfterViewInit, OnDestroy {
+  @Input('forgeFormControl') public control: AbstractControl | null;
+  @HostListener('focusout') public onBlur(): void {
+    this._onBlur();
+  }
+  @HostListener('keydown') public onKeyDown(): void {
+    this._onKeydown();
+  }
+
+  private readonly _destroy$ = new Subject<void>();
+
+  constructor(
+    private _renderer: Renderer2,
+    private _elementRef: ElementRef
+  ) {}
+
+  public ngAfterViewInit(): void {
+    this._observeValidity();
+  }
+
+  public ngOnDestroy(): void {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
+
+  private _onBlur(): void {
+    // Wait one frame for the control to get marked as touched
+    window.requestAnimationFrame(() => {
+      this._updateValidity();
+    });
+  }
+
+  private _onKeydown(): void {
+    // Wait one frame for the control to update
+    window.requestAnimationFrame(() => {
+      if (this.control?.touched) {
+        this._updateValidity();
+      }
+    });
+  }
+
+  private _observeValidity(): void {
+    this.control?.statusChanges
+      .pipe(startWith(this.control.status), takeUntil(this._destroy$))
+      .subscribe(() => {
+        this._setRequired();
+        this._updateValidity();
+      })
+  }
+
+  private _setRequired(): void {
+    if (!this.control?.validator) {
+      this._renderer.setProperty(this._elementRef.nativeElement, 'required', false);
+      return;
+    }
+
+    const validator = this.control.validator({} as AbstractControl);
+    const required = validator && validator['required'];
+    this._renderer.setProperty(this._elementRef.nativeElement, 'required', required);
+  }
+
+  private _updateValidity(): void {
+    const invalid = this.control?.invalid && this.control?.touched;
+    this._renderer.setProperty(this._elementRef.nativeElement, 'invalid', invalid);
+  }
+}

projects/forge-angular/src/lib/form-validity/form-validity.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { FormValidityDirective } from './form-validity.directive';
+
+
+@NgModule({
+  declarations: [
+    FormValidityDirective
+  ],
+  exports: [
+    FormValidityDirective
+  ]
+})
+export class FormValidityModule {}

projects/forge-angular/src/lib/form-validity/index.ts

@@ -0,0 +1,2 @@
+export * from './form-validity.directive';
+export * from './form-validity.module';

projects/forge-angular/src/public-api.ts

@@ -10,6 +10,7 @@ export * from './lib/core';
 export * from './lib/date-picker';
 export * from './lib/date-range-picker';
 export * from './lib/dialog';
+export * from './lib/form-validity';
 export * from './lib/popup';
 export * from './lib/select';
 export * from './lib/slider';

src/app/components/example-content/example-content-routing.module.ts

@@ -6,6 +6,7 @@ import { ExampleContentComponent } from './example-content.component';
 const routes: Routes = [
   { path: '', pathMatch: 'full', component: ExampleContentComponent },
   { path: 'expansion-panel', loadChildren: () => import('../../views/examples/expansion-panel-examples/expansion-panel-examples.module').then(m => m.ExpansionPanelExamplesModule) },
+  { path: 'form-validity-directive', loadChildren: () => import('../../views/examples/form-validity-directive-example/form-validity-directive-example.module').then(m => m.FormValidityDirectiveExampleModule) },
   { path: 'toolbar-example', loadChildren: () => import('../../views/examples/toolbar-example/toolbar-example.module').then(m => m.ToolbarExampleModule) },
   { path: 'two-column-grid', loadChildren: () => import('../../views/examples/two-column-grid/two-column-grid.module').then(m => m.TwoColumnGridModule) },
   { path: 'reactive-form', loadChildren: () => import('../../views/examples/reactive-form-example/reactive-form-example.module').then(m => m.ReactiveFormExampleModule) },

src/app/components/sidenav/sidenav.component.ts

@@ -82,6 +82,7 @@ export class SidenavComponent implements OnInit {
 
   public exampleMenuItems: IMenuItem[] = [
     { label: 'Expansion panel', value: '/example/expansion-panel' },
+    { label: 'Form validity directive', value: '/example/form-validity-directive' },
     { label: 'Reactive form', value: '/example/reactive-form' },
     { label: 'Table', value: '/example/table' },
     { label: 'Toolbar', value: '/example/toolbar-example' },

src/app/views/examples/form-validity-directive-example/form-validity-directive-example-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FormValidityDirectiveExampleComponent } from './form-validity-directive-example.component';
+
+const routes: Routes = [
+  { path: '', component: FormValidityDirectiveExampleComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FormValidityDirectiveExampleRoutingModule {}

src/app/views/examples/form-validity-directive-example/form-validity-directive-example.component.html

@@ -0,0 +1,26 @@
+<app-demo-card headerText="Form Field Directive Example">
+  <form [formGroup]="form" novalidate autocomplete="off">
+    <div class="forge-demo-form-field">
+      <forge-text-field forgeFormValidity [forgeFormControl]="form.controls['textField']">
+        <input type="text" formControlName="textField" />
+        <label>Text field</label>
+      </forge-text-field>
+    </div>
+    <div class="forge-demo-form-field">
+      <forge-select label="Select" forgeFormValidity [forgeFormControl]="form.controls['select']" formControlName="select">
+        <forge-option value="first">First</forge-option>
+        <forge-option value="second">Second</forge-option>
+        <forge-option value="third">Third</forge-option>
+      </forge-select>
+    </div>
+    <div class="forge-demo-form-field">
+      <forge-date-picker formControlName="dateField" masked>
+        <forge-text-field forgeFormValidity [forgeFormControl]="form.controls['dateField']">
+          <label>Date field</label>
+          <input type="text" />
+        </forge-text-field>
+      </forge-date-picker>
+    </div>
+  </form>
+  <pre>{{ form.status | json }}</pre>
+</app-demo-card>

src/app/views/examples/form-validity-directive-example/form-validity-directive-example.component.scss

@@ -0,0 +1,7 @@
+.forge-demo-form-field {
+  margin-bottom: 16px;
+
+  forge-text-field, forge-select {
+    max-width: 320px;
+  }
+}

src/app/views/examples/form-validity-directive-example/form-validity-directive-example.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-form-validity-directive',
+  templateUrl: './form-validity-directive-example.component.html',
+  styleUrls: ['./form-validity-directive-example.component.scss']
+})
+
+export class FormValidityDirectiveExampleComponent {
+  public form = new FormGroup({
+    textField: new FormControl(null, [Validators.required]),
+    select: new FormControl(null, [Validators.required]),
+    dateField: new FormControl(null, [Validators.required])
+  });
+}

src/app/views/examples/form-validity-directive-example/form-validity-directive-example.module.ts

@@ -0,0 +1,64 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { SharedModule } from '../../../shared/shared.module';
+import { FormValidityDirectiveExampleComponent } from './form-validity-directive-example.component';
+import { FormValidityDirectiveExampleRoutingModule } from './form-validity-directive-example-routing.module';
+import {
+  defineTextFieldComponent,
+  defineDatePickerComponent,
+  defineSelectComponent,
+  defineButtonComponent,
+  defineCheckboxComponent,
+  defineRadioComponent,
+  defineChipSetComponent,
+  defineChipComponent,
+  defineSliderComponent,
+  defineAutocompleteComponent,
+  defineTimePickerComponent,
+  defineQuantityFieldComponent
+} from '@tylertech/forge';
+import {
+  FormValidityModule,
+  ForgeSelectModule,
+  ForgeDatePickerModule,
+  ForgeChipModule,
+  ForgeAutocompleteModule,
+  ForgeSliderModule,
+  ForgeTimePickerModule,
+  ForgeSwitchModule
+} from '@tylertech/forge-angular';
+
+defineTextFieldComponent();
+defineDatePickerComponent();
+defineSelectComponent();
+defineButtonComponent();
+defineCheckboxComponent();
+defineRadioComponent();
+defineChipSetComponent();
+defineChipComponent();
+defineSliderComponent();
+defineAutocompleteComponent();
+defineTimePickerComponent();
+defineQuantityFieldComponent();
+
+@NgModule({
+  declarations: [FormValidityDirectiveExampleComponent],
+  imports: [
+    CommonModule,
+    SharedModule,
+    ReactiveFormsModule,
+    FormValidityDirectiveExampleRoutingModule,
+    FormValidityModule,
+    ForgeAutocompleteModule,
+    ForgeSliderModule,
+    ForgeSelectModule,
+    ForgeDatePickerModule,
+    ForgeChipModule,
+    ForgeTimePickerModule,
+    ForgeSwitchModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class FormValidityDirectiveExampleModule {}