fix(tags): input validation in tags-list (#UIM-368) (#412)

to 8.x
positive-js · Feb 17, 2020 · c00d31b · c00d31b
1 parent 68b3db2
commit c00d31b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/packages/mosaic/form-field/form-field.ts b/packages/mosaic/form-field/form-field.ts
@@ -170,7 +170,7 @@ export class McFormField extends McFormFieldMixinBase implements
 
     onHoverChanged(isHovered: boolean) {
         if (isHovered !== this.hovered) {
-            this.hovered  = isHovered;
+            this.hovered = isHovered;
             this._changeDetectorRef.markForCheck();
         }
     }
@@ -183,7 +183,7 @@ export class McFormField extends McFormFieldMixinBase implements
         return this.connectionContainerRef || this._elementRef;
     }
 
-        /** Determines whether a class from the NgControl should be forwarded to the host element. */
+    /** Determines whether a class from the NgControl should be forwarded to the host element. */
     shouldForward(prop: keyof NgControl): boolean {
         const ngControl = this.control ? this.control.ngControl : null;
 

diff --git a/packages/mosaic/tags/tag-input.ts b/packages/mosaic/tags/tag-input.ts
@@ -1,5 +1,16 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output, Renderer2 } from '@angular/core';
+import {
+    Directive,
+    ElementRef,
+    EventEmitter,
+    Inject,
+    Input,
+    OnChanges,
+    Optional,
+    Output,
+    Renderer2, Self
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
 import { hasModifierKey } from '@ptsecurity/cdk/keycodes';
 
 import { MC_TAGS_DEFAULT_OPTIONS, McTagsDefaultOptions } from './tag-default-options';
@@ -113,7 +124,8 @@ export class McTagInput implements McTagTextControl, OnChanges {
     constructor(
         private elementRef: ElementRef<HTMLInputElement>,
         private renderer: Renderer2,
-        @Inject(MC_TAGS_DEFAULT_OPTIONS) private defaultOptions: McTagsDefaultOptions
+        @Inject(MC_TAGS_DEFAULT_OPTIONS) private defaultOptions: McTagsDefaultOptions,
+        @Optional() @Self() public ngControl: NgControl
     ) {
         // tslint:disable-next-line: no-unnecessary-type-assertion
         this.inputElement = this.elementRef.nativeElement as HTMLInputElement;

diff --git a/packages/mosaic/tags/tag-list.component.ts b/packages/mosaic/tags/tag-list.component.ts
@@ -458,6 +458,12 @@ export class McTagList extends McTagListMixinBase implements McFormFieldControl<
     /** Associates an HTML input element with this tag list. */
     registerInput(inputElement: McTagTextControl): void {
         this.tagInput = inputElement;
+
+        // todo need rethink about it
+        if (this.ngControl && inputElement.ngControl) {
+            inputElement.ngControl.statusChanges!
+                .subscribe(() => this.ngControl.control!.setErrors(inputElement.ngControl!.errors));
+        }
     }
 
     // Implemented as part of ControlValueAccessor.

diff --git a/packages/mosaic/tags/tag-text-control.ts b/packages/mosaic/tags/tag-text-control.ts
@@ -1,14 +1,18 @@
-
 /** Interface for a text control that is used to drive interaction with a mc-tag-list. */
+import { NgControl } from '@angular/forms';
+
+
 // tslint:disable-next-line: naming-convention
 export interface McTagTextControl {
-  id: string;
+    id: string;
+
+    placeholder: string;
 
-  placeholder: string;
+    focused: boolean;
 
-  focused: boolean;
+    empty: boolean;
 
-  empty: boolean;
+    ngControl?: NgControl;
 
-  focus(): void;
+    focus(): void;
 }