fix(input): input emits unexpected valueChanges (#UIM-366) (#415)

8x
positive-js · Feb 20, 2020 · b749bec · b749bec
1 parent ea01300
commit b749bec
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 50 deletions.
diff --git a/packages/mosaic-dev/validation/module.ts b/packages/mosaic-dev/validation/module.ts
@@ -1,5 +1,5 @@
 /* tslint:disable:no-console no-reserved-keywords */
-import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
     AbstractControl, FormBuilder,
     FormControl,
@@ -119,10 +119,7 @@ export function ldapLoginValidator(loginRegex: RegExp): ValidatorFn {
     selector: 'app',
     template: require('./template.html'),
     encapsulation: ViewEncapsulation.None,
-    styleUrls: ['./styles.scss'],
-    providers: [
-        // { provide: MC_VALIDATION, useValue: { useValidation: false } }
-    ]
+    styleUrls: ['./styles.scss']
 })
 export class DemoComponent {
     reactiveTypeaheadItems: string[] = [];
@@ -131,6 +128,10 @@ export class DemoComponent {
     treeSelectValue: string = '';
     typeaheadItems: string[] = [];
 
+    control = new FormControl('', [Validators.pattern('[a-zA-Z]*')]);
+
+    value = '';
+
     reactiveForm: FormGroup;
 
     formWithCustomValidator = new FormGroup(
@@ -152,7 +153,7 @@ export class DemoComponent {
 
     dataSource: McTreeFlatDataSource<FileNode, FileFlatNode>;
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor(private formBuilder: FormBuilder, public changeDetectorRef: ChangeDetectorRef) {
         this.treeFlattener = new McTreeFlattener(
             this.transformer, this.getLevel, this.isExpandable, this.getChildren
         );
@@ -173,6 +174,9 @@ export class DemoComponent {
             reactiveTypeaheadValue: new FormControl([], [Validators.required])
         });
 
+        this.control.valueChanges.subscribe((value) => {
+            console.log('valueChanges: ', value); // tslint:disable-line:no-console
+        });
     }
 
     onSubmitReactiveForm(form: FormGroup) {

diff --git a/packages/mosaic-dev/validation/styles.scss b/packages/mosaic-dev/validation/styles.scss
@@ -8,15 +8,15 @@
     display: flex;
     flex-direction: row;
 
-    & form {
-        margin-left: 50px;
-    }
-
     & .mc-form-field {
         width: 200px;
     }
 }
 
+.margin {
+    margin-left: 50px;
+}
+
 header {
     $config: mc-typography-config();
 

diff --git a/packages/mosaic-dev/validation/template.html b/packages/mosaic-dev/validation/template.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactiveForm(reactiveForm)" novalidate>
+    <form class="margin" [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactiveForm(reactiveForm)" novalidate>
         <div>Reactive form</div>
         <br>
 
@@ -17,15 +17,6 @@
                 <mc-option value="Focused">Focused</mc-option>
                 <mc-option value="Selected">Selected</mc-option>
                 <mc-option value="Selected1">Selected1</mc-option>
-                <mc-option value="Selected2">Selected2</mc-option>
-                <mc-option value="Selected3">Selected3</mc-option>
-                <mc-option value="Selected4">Selected4</mc-option>
-                <mc-option value="Selected5">Selected5</mc-option>
-                <mc-option value="Selected6">Selected6</mc-option>
-                <mc-option value="Selected7">Selected7</mc-option>
-                <mc-option value="Selected8">Selected8</mc-option>
-                <mc-option value="Selected9">Selected9</mc-option>
-                <mc-option value="Selected10">Selected10</mc-option>
             </mc-select>
         </mc-form-field>
 
@@ -75,7 +66,7 @@
 
     <br><br>
 
-    <form #form="ngForm" (ngSubmit)="onSubmitTemplateForm(form)" novalidate>
+    <form class="margin" #form="ngForm" (ngSubmit)="onSubmitTemplateForm(form)" novalidate>
         <div>Template form</div>
         <br>
 
@@ -84,7 +75,7 @@
                 name="input"
                 mcInput
                 [(ngModel)]="inputValue"
-                placeholder="required pattern=[a-zA-Z]*" required pattern="[a-zA-Z]*">
+                placeholder="required pattern=[a-zA-Z]*" required>
         </mc-form-field>
 
         <br><br>
@@ -97,15 +88,6 @@
                 <mc-option value="Focused">Focused</mc-option>
                 <mc-option value="Selected">Selected</mc-option>
                 <mc-option value="Selected1">Selected1</mc-option>
-                <mc-option value="Selected2">Selected2</mc-option>
-                <mc-option value="Selected3">Selected3</mc-option>
-                <mc-option value="Selected4">Selected4</mc-option>
-                <mc-option value="Selected5">Selected5</mc-option>
-                <mc-option value="Selected6">Selected6</mc-option>
-                <mc-option value="Selected7">Selected7</mc-option>
-                <mc-option value="Selected8">Selected8</mc-option>
-                <mc-option value="Selected9">Selected9</mc-option>
-                <mc-option value="Selected10">Selected10</mc-option>
             </mc-select>
         </mc-form-field>
 
@@ -158,7 +140,7 @@
 
     <br><br>
 
-    <form [formGroup]="formWithCustomValidator"
+    <form class="margin" [formGroup]="formWithCustomValidator"
           (ngSubmit)="onSubmitFormWithCustomValidator(formWithCustomValidator)"
           novalidate>
         <div>formGroup with custom validator</div>
@@ -178,4 +160,26 @@
 
         <button mc-button>Submit</button>
     </form>
+
+    <div class="margin">
+        <div>formControl</div>
+
+        <br>
+
+        <mc-form-field>
+            <input mcInput [formControl]="control" type="text" placeholder="Number MaxMin Step">
+        </mc-form-field>
+
+        <br><br>
+
+        <form #form="ngForm">
+            <mc-form-field>
+                <input mcInput [(ngModel)]="value" type="text" name="qwe" required>
+            </mc-form-field>
+
+            <br><br>
+
+            <button mc-button type="submit">submit</button>
+        </form>
+    </div>
 </div>
diff --git a/packages/mosaic/core/validation/validation.ts b/packages/mosaic/core/validation/validation.ts
@@ -45,13 +45,13 @@ export function setMosaicValidation(component) {
     if (parentForm) {
         parentForm.ngSubmit.subscribe(() => {
             // tslint:disable-next-line: no-unnecessary-type-assertion
-            ngControl.control!.updateValueAndValidity();
+            ngControl.control!.updateValueAndValidity({ emitEvent: false });
         });
     }
 
     if (component.ngModel) {
         setMosaicValidationForModelControl(component, component.rawValidators, parentForm);
-    } else if (component.formControlName) {
+    } else if (component.formControlName || component.ngControl) {
         setMosaicValidationForFormControl(component, parentForm, ngControl);
     }
 }
@@ -92,7 +92,7 @@ export function setMosaicValidationForFormControl(component, parentForm: NgForm,
     ngControl.statusChanges!
         .subscribe(() => {
             // changed required validation logic
-            if (ngControl.invalid && !parentForm.submitted && ngControl.errors!.required) {
+            if (ngControl.invalid && (parentForm && !parentForm.submitted) && ngControl.errors!.required) {
                 setValidState(ngControl.control!, originalValidator!);
             }