fix(input): fixed regex and logic for required field (#UIM-914, #UIM-917)

packages/mosaic-dev/input/module.ts

@@ -1,10 +1,8 @@
 /* tslint:disable:no-magic-numbers */
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 import {
-    FormControl,
     FormsModule,
-    ReactiveFormsModule,
-    Validators
+    ReactiveFormsModule
 } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -24,11 +22,12 @@ import { McInputModule } from '../../mosaic/input/';
 })
 export class InputDemoComponent {
     passwordRules = PasswordRules;
-    password = new FormControl('456', Validators.required);
+    password = '456';
 
     value: string = '';
     numberValue: number | null = null;
     min = -5;
+    customRegex = /\D/;
 }
 
 

packages/mosaic-dev/input/template.html

@@ -5,7 +5,7 @@
     <br>
 
     <mc-form-field>
-        <input mcInputPassword [formControl]="password" placeholder="Number MaxMin Step">
+        <input mcInputPassword [ngModel]="password" [required]="true" placeholder="Number MaxMin Step">
         <mc-password-toggle [mcTooltipNotHidden]="'Скрыть пароль'" [mcTooltipHidden]="'Показать пароль'"></mc-password-toggle>
 
         <mc-password-hint [rule]="passwordRules.Length" [min]="8" [max]="15">От 8 до 15 символов</mc-password-hint>
@@ -16,7 +16,9 @@
 
         <mc-password-hint [rule]="passwordRules.Digit">Цифра</mc-password-hint>
 
-        <mc-password-hint [rule]="passwordRules.SpecialSymbols">Только латинские буквы, цифры, пробелы и спецсимволы</mc-password-hint>
+        <mc-password-hint [rule]="passwordRules.LatinAndSpecialSymbols">Только латинские буквы, цифры, пробелы и спецсимволы</mc-password-hint>
+
+        <mc-password-hint [rule]="passwordRules.Custom" [regex]="customRegex">User Rule</mc-password-hint>
     </mc-form-field>
 
     <br><br>

packages/mosaic-examples/mosaic/input/input-password-overview/input-password-overview-example.html

@@ -11,5 +11,5 @@
 
     <mc-password-hint [rule]="passwordRules.Digit">Цифра</mc-password-hint>
 
-    <mc-password-hint [rule]="passwordRules.SpecialSymbols">Только латинские буквы, цифры, пробелы и спецсимволы</mc-password-hint>
+    <mc-password-hint [rule]="passwordRules.LatinAndSpecialSymbols">Только латинские буквы, цифры, пробелы и спецсимволы</mc-password-hint>
 </mc-form-field>

packages/mosaic/form-field/password-hint.ts

@@ -18,14 +18,15 @@ export enum PasswordRules {
     UpperLatin,
     LowerLatin,
     Digit,
-    SpecialSymbols
+    LatinAndSpecialSymbols,
+    Custom
 }
 
 export const regExpPasswordValidator = {
     [PasswordRules.LowerLatin]: RegExp(/^(?=.*?[a-z])/),
     [PasswordRules.UpperLatin]: RegExp(/^(?=.*?[A-Z])/),
     [PasswordRules.Digit]: RegExp(/^(?=.*?[0-9])/),
-    [PasswordRules.SpecialSymbols]: RegExp(/^(?=.*?[" !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~"])/)
+    [PasswordRules.LatinAndSpecialSymbols]: RegExp(/[^ !`"'#№$%&()*+,-./:;<=>?@[\]^_{|}~A-Za-z0-9]/)
 };
 
 
@@ -77,17 +78,23 @@ export class McPasswordHint implements AfterContentInit {
             throw Error('You should set [rule] name');
         }
 
+        if (this.rule === PasswordRules.Custom && this.regex === undefined) {
+            throw Error('You should set [regex] for PasswordRules.Custom');
+        }
+
         if (this.rule === PasswordRules.Length && (this.min || this.max) === null) {
             throw Error('For [rule] "Length" need set [min] and [max]');
         }
 
         if (this.rule === PasswordRules.Length) {
             this.checkRule = this.checkLengthRule;
-        } else if (
-            [PasswordRules.UpperLatin, PasswordRules.LowerLatin, PasswordRules.Digit, PasswordRules.SpecialSymbols]
-                .includes(this.rule)
-        ) {
-            this.regex = this.regex || regExpPasswordValidator[this.rule];
+        } else if ([PasswordRules.UpperLatin, PasswordRules.LowerLatin, PasswordRules.Digit].includes(this.rule)) {
+            this.regex = regExpPasswordValidator[this.rule];
+            this.checkRule = this.checkRegexRule;
+        } else if (this.rule === PasswordRules.LatinAndSpecialSymbols) {
+            this.regex = regExpPasswordValidator[this.rule];
+            this.checkRule = this.checkSpecialSymbolsRegexRule;
+        } else if (this.rule === PasswordRules.Custom) {
             this.checkRule = this.checkRegexRule;
         } else {
             throw Error(`Unknown [rule]=${this.rule}`);
@@ -106,6 +113,10 @@ export class McPasswordHint implements AfterContentInit {
             this.hasError = !this.checkRule(this.control.value);
         }
 
+        if (!this.control.required && !this.control.value) {
+            this.checked = this.hasError = false;
+        }
+
         this.lastControlValue = this.control.value;
         this.changeDetectorRef.markForCheck();
     }
@@ -118,6 +129,10 @@ export class McPasswordHint implements AfterContentInit {
         return !!this.regex?.test(value);
     }
 
+    private checkSpecialSymbolsRegexRule(value: string): boolean {
+        return !!value && !this.regex?.test(value);
+    }
+
     private isValueChanged(): boolean {
         return this.lastControlValue !== this.formField.control.value;
     }

packages/mosaic/input/input-password.spec.ts

@@ -43,7 +43,8 @@ function createComponent<T>(component: Type<T>, imports: any[] = [], providers:
     template: `
         <mc-form-field>
             <input mcInputPassword [(ngModel)]="value">
-            <mc-password-toggle [mcTooltipNotHidden]="'Скрыть пароль'" [mcTooltipHidden]="'Показать пароль'"></mc-password-toggle>
+            <mc-password-toggle [mcTooltipNotHidden]="'Скрыть пароль'"
+                                [mcTooltipHidden]="'Показать пароль'"></mc-password-toggle>
 
             <mc-password-hint [rule]="passwordRules.Length" [min]="8" [max]="64">От 8 до 64 символов</mc-password-hint>
 
@@ -53,7 +54,9 @@ function createComponent<T>(component: Type<T>, imports: any[] = [], providers:
 
             <mc-password-hint [rule]="passwordRules.Digit">Цифра</mc-password-hint>
 
-            <mc-password-hint [rule]="passwordRules.SpecialSymbols">Только латинские буквы, цифры, пробелы и спецсимволы</mc-password-hint>
+            <mc-password-hint [rule]="passwordRules.LatinAndSpecialSymbols">Только латинские буквы, цифры, пробелы и
+                спецсимволы
+            </mc-password-hint>
         </mc-form-field>
     `
 })

tools/public_api_guard/mosaic/form-field.api.md

@@ -233,15 +233,17 @@ export class McSuffix {
 
 // @public (undocumented)
 export enum PasswordRules {
+    // (undocumented)
+    Custom = 5,
     // (undocumented)
     Digit = 3,
     // (undocumented)
+    LatinAndSpecialSymbols = 4,
+    // (undocumented)
     Length = 0,
     // (undocumented)
     LowerLatin = 2,
     // (undocumented)
-    SpecialSymbols = 4,
-    // (undocumented)
     UpperLatin = 1
 }