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

packages/mosaic-dev/validation/module.ts

@@ -1,7 +1,8 @@
 /* tslint:disable:no-console no-reserved-keywords */
 import { ChangeDetectorRef, Component, NgModule, ViewEncapsulation } from '@angular/core';
 import {
-    AbstractControl, FormBuilder,
+    AbstractControl,
+    FormBuilder,
     FormControl,
     FormGroup,
     FormsModule, NgForm,
@@ -130,6 +131,9 @@ export class DemoComponent {
 
     control = new FormControl('', [Validators.pattern('[a-zA-Z]*')]);
 
+    inputControl = new FormControl('', [Validators.pattern('[a-zA-Z]*')]);
+    tagsControl = new FormControl([], Validators.required);
+
     value = '';
 
     reactiveForm: FormGroup;
@@ -171,15 +175,16 @@ export class DemoComponent {
             ]),
             reactiveSelectValue: new FormControl('', [Validators.required]),
             reactiveTreeSelectValue: new FormControl('', [Validators.required]),
-            reactiveTypeaheadValue: new FormControl([], [Validators.required])
+            reactiveTypeaheadValue: new FormControl([], Validators.required),
+            tagInputFormControl: new FormControl('', [Validators.pattern('[a-zA-Z]*')])
         });
 
         this.reactiveForm.valueChanges.subscribe((value) => {
             console.log('reactiveForm valueChanges: ', value); // tslint:disable-line:no-console
         });
-
-        this.control.valueChanges.subscribe((value) => {
-            console.log('valueChanges: ', value); // tslint:disable-line:no-console
+        //
+        this.inputControl.valueChanges.subscribe((value) => {
+            console.log('inputControl valueChanges: ', value); // tslint:disable-line:no-console
         });
     }
 

packages/mosaic-dev/validation/template.html

@@ -53,6 +53,7 @@
                     <i mc-icon="mc-close-S_16" mcTagRemove></i>
                 </mc-tag>
                 <input placeholder="New tag..."
+                       formControlName="tagInputFormControl"
                        [mcTagInputFor]="inputTagList"
                        [mcTagInputSeparatorKeyCodes]="separatorKeysCodes"
                        (mcTagInputTokenEnd)="reactiveInputOnCreate($event)">
@@ -80,6 +81,7 @@
                 name="input"
                 mcInput
                 [(ngModel)]="inputValue"
+                pattern="[a-zA-Z]*"
                 placeholder="required pattern=[a-zA-Z]*" required>
         </mc-form-field>
 

packages/mosaic/core/validation/validation.ts

@@ -33,7 +33,7 @@ function setValidState(control: AbstractControl, validator: ValidatorFn): void {
 /** This function do next:
  * - run validation on submitting parent form
  * - prevent validation in required validator if form doesn't submitted
- * - if control focused validation will be prevented
+ * - if control has focus validation will be prevented
  */
 export function setMosaicValidation(component) {
     const ngControl = component.ngControl;

packages/mosaic/tags/tag-input.ts

@@ -144,19 +144,28 @@ export class McTagInput implements McTagTextControl, OnChanges {
 
     /** Checks to see if the blur should emit the (tagEnd) event. */
     blur() {
-        if (this.addOnBlur) {
-            this.emittagEnd();
-        }
-
         this.focused = false;
         // Blur the tag list if it is not focused
         if (!this._tagList.focused) {
+            this.triggerValidation();
+
             this._tagList.blur();
         }
 
+        // tslint:disable-next-line: no-unnecessary-type-assertion
+        if (this.addOnBlur && !(this.hasControl() && this.ngControl.invalid)) {
+            this.emittagEnd();
+        }
+
         this._tagList.stateChanges.next();
     }
 
+    triggerValidation() {
+        if (!this.hasControl()) { return; }
+
+        (this.ngControl.statusChanges as EventEmitter<string | null>).emit(this.ngControl.status);
+    }
+
     /** Checks to see if the (tagEnd) event needs to be emitted. */
     emittagEnd(event?: KeyboardEvent) {
         if (!this.inputElement.value && !!event) {
@@ -203,6 +212,10 @@ export class McTagInput implements McTagTextControl, OnChanges {
         this.inputElement.focus();
     }
 
+    private hasControl(): boolean {
+        return !!this.ngControl;
+    }
+
     private setDefaultInputWidth() {
         this.renderer.setStyle(this.inputElement, 'width', '30px');
     }