feat(validation-messages): add support for form control directives

resolve: #HOA-85
valueadd-poland · May 13, 2021 · 1c87b26 · 1c87b26
1 parent a731497
commit 1c87b26
Showing 1 changed file with 52 additions and 3 deletions.
diff --git a/...lidation-messages/src/lib/components/validation-messages/validation-messages.component.ts b/...lidation-messages/src/lib/components/validation-messages/validation-messages.component.ts
@@ -1,11 +1,20 @@
 import {
+  AfterContentInit,
   ChangeDetectorRef,
   Component,
   DoCheck,
+  forwardRef,
   Input,
   OnDestroy,
 } from "@angular/core";
-import { AbstractControl } from "@angular/forms";
+import {
+  AbstractControl,
+  ControlContainer,
+  ControlValueAccessor,
+  FormControl,
+  FormGroup,
+  NG_VALUE_ACCESSOR,
+} from "@angular/forms";
 import { Subject, Subscription } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 import { ApiErrorMessage } from "../../resources/interfaces/api-error-message.interface";
@@ -14,10 +23,23 @@ import { ValidationMessagesService } from "../../services/validation-messages.se
 @Component({
   selector: "va-validation-messages",
   templateUrl: "./validation-messages.component.html",
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidationMessagesComponent),
+      multi: true,
+    },
+  ],
 })
-export class ValidationMessagesComponent implements OnDestroy, DoCheck {
+export class ValidationMessagesComponent
+  implements OnDestroy, DoCheck, AfterContentInit, ControlValueAccessor {
+  @Input("control")
+  _control?: AbstractControl;
+  @Input()
+  formControl?: AbstractControl;
   @Input()
-  control?: AbstractControl;
+  formControlName?: string;
+  control: AbstractControl = null;
   errorMessages: string[] = [];
   materialErrorMatcher = false;
   parsedApiErrorMessages: string[] = [];
@@ -31,6 +53,26 @@ export class ValidationMessagesComponent implements OnDestroy, DoCheck {
   private _multiple = false;
   private ngUnsubscribe: Subject<void> = new Subject<void>();
 
+  ngAfterContentInit() {
+    this.connectControl();
+  }
+
+  private connectControl() {
+    if (
+      this.formControlName &&
+      this.controlContainer &&
+      this.controlContainer.control instanceof FormGroup
+    ) {
+      this.control = (this.controlContainer.control as FormGroup).get(
+        this.formControlName
+      );
+    } else if (this.formControl && this.formControl instanceof FormControl) {
+      this.control = this.formControl;
+    } else if (this._control) {
+      this.control = this._control;
+    }
+  }
+
   get apiErrorMessages():
     | Array<ApiErrorMessage | string>
     | ApiErrorMessage
@@ -73,6 +115,7 @@ export class ValidationMessagesComponent implements OnDestroy, DoCheck {
 
   constructor(
     private cd: ChangeDetectorRef,
+    private controlContainer: ControlContainer,
     private validationMessagesService: ValidationMessagesService
   ) {
     this.unsubscribeAndClearValueChanges = this.unsubscribeAndClearValueChanges.bind(
@@ -169,4 +212,10 @@ export class ValidationMessagesComponent implements OnDestroy, DoCheck {
       }
     }
   }
+
+  registerOnChange(fn: any): void {}
+
+  registerOnTouched(fn: any): void {}
+
+  writeValue(obj: any): void {}
 }