Merge pull request #26 from takenet/feature/blip_input_invalid_property

'invalid' property on blip input

Author: Mariana Ramos

src/components/blipInputDpr/blipInputDpr.component.ts

@@ -24,6 +24,7 @@ const BLIP_INPUT_PREFIX = 'blip-input-dpr';
  * @param {string} type - the input type is necessary for validation. If not specified, takes value 'text'
  * @param {string} inputAutocomplete - the input autocomplete field for undesired browser autompletes
  * @param {string} unmaskablePassword - the expression that defines if input of type password will be unmaskable
+ * @param {expression} invalid - the input is invalid
  */
 
 class BlipInputDprController extends ComponentController {
@@ -33,6 +34,7 @@ class BlipInputDprController extends ComponentController {
     passwordUnmasked: boolean = false;
     onChange: ($val) => {};
     disabled: boolean;
+    invalid: boolean;
 
     constructor(
         private $element,
@@ -91,6 +93,7 @@ export const BlipInputDprComponent = angular
             fieldId: '@?',
             showPasswordStrength: '<?',
             unmaskablePassword: '<?',
+            invalid: '<?'
         },
         require: {
             ngModel: 'ngModel',

src/components/blipInputDpr/blipInputDprView.html

@@ -2,7 +2,7 @@
     ng-class="{
     'bp-input-wrapper--focus': focused,
     'bp-input-wrapper--valid': focused && $ctrl.parentForm[$ctrl.fieldName].$viewValue && $ctrl.parentForm[$ctrl.fieldName].$valid,
-    'bp-input-wrapper--invalid': !$ctrl.disabled && !$ctrl.parentForm[$ctrl.fieldName].$pristine && $ctrl.parentForm[$ctrl.fieldName].$invalid,
+    'bp-input-wrapper--invalid': $ctrl.invalid || (!$ctrl.disabled && !$ctrl.parentForm[$ctrl.fieldName].$pristine && $ctrl.parentForm[$ctrl.fieldName].$invalid),
     'bp-input-wrapper--disabled': $ctrl.disabled }"
     ng-click="$ctrl.focus()"
     id="{{$ctrl.elementId}}">
@@ -11,7 +11,7 @@
        'bp-c-rooftop': !focused,
        'bp-c-blip-dark': focused,
        'bp-c-true': focused && $ctrl.parentForm[$ctrl.fieldName].$viewValue && $ctrl.parentForm[$ctrl.fieldName].$valid,
-       'bp-c-warning': !$ctrl.parentForm[$ctrl.fieldName].$pristine && $ctrl.parentForm[$ctrl.fieldName].$invalid }">{{$ctrl.label}}</label>
+       'bp-c-warning': $ctrl.invalid || (!$ctrl.parentForm[$ctrl.fieldName].$pristine && $ctrl.parentForm[$ctrl.fieldName].$invalid) }">{{$ctrl.label}}</label>
 
     <password-strength ng-if="$ctrl.showPasswordStrength && $ctrl.type === 'password'" ng-model="$ctrl.model"></password-strength>