モデルからの入力を更新する際のイベント角度

Question

私は型クラスの入力に置いた指示を持っています。 ぼかし、フォーカスイベントを追加して、入力時に入力を終了し、ラベル（Material Design）の効果を得るために入力を終了しますが、値をラウンドラッピングするときに、フィールドが塗りつぶされたことを知る必要があります。

app.directive('formControl', function() { 
    return { 
    restrict: 'C', 
    link: function (scope, element, attrs) { 

     // Add class filled to form-control's that have a value 
     if(element.val()){ 
     element.parent().addClass('filled'); 
     } 

     // Any event here that can tell me that the value was changed by the angular so I can put the css class 

     element.bind('blur', function (e) { 
     input = angular.element(e.currentTarget); 
     if(input.val()){ 
      input.parent().addClass('filled'); 
     } else { 
      input.parent().removeClass('filled'); 
     } 
     input.parent().removeClass('active'); 
     }).bind('focus', function (e) { 
     input = angular.element(e.currentTarget); 
     input.parent().addClass('active'); 
     }); 

    } 
    }; 
}); 

Answer 1

代わりのバインド内filledクラスを追加するには、ウォッチャーを追加し、クラスを追加することができます。以下の例を参照してください。クラス内の色を使用して、それらを表現します。さらに

var app = angular.module('myApp', []); 
 

 
app.controller('MyController', ['$scope', MyController]);  
 

 
function MyController($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.name2 = 'hello'; 
 
} 
 
app.directive('formControl', function() { 
 
    return { 
 
    restrict: 'C', 
 
    require: 'ngModel', 
 
    link: function (scope, element, attrs, ngModel) { 
 

 
     // Add class filled to form-control's that have a value 
 
     if(ngModel.$viewValue){ 
 
     element.parent().addClass('filled'); 
 
     } 
 

 
     // Any event here that can tell me that the value was changed by the angular so I can put the css class 
 
     element.bind('blur', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().removeClass('active'); 
 
     }).bind('focus', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().addClass('active'); 
 
     }); 
 
     scope.$watch(function(){return ngModel.$viewValue;}, function(newValue){ 
 
     if('required' in attrs){ 
 
      if(newValue){ 
 
      element.parent().addClass('filled'); 
 
      } else { 
 
      element.parent().removeClass('filled'); 
 
      } 
 
     } 
 
     }) 
 

 
    } 
 
    }; 
 
});

.filled{ 
 
    background-color:lightblue; 
 
} 
 
.active{ 
 
    border:1px solid red; 
 
}

<div ng-controller='MyController' ng-app="myApp"> 
 
    <label> The below input does not have required attribute</label> 
 
    <input type="text" class="form-control" ng-model="name"> 
 
    <br> 
 
    <br> 
 
    <label> The below input has required attribute</label> 
 
    <input type="text" class="form-control" required ng-model="name2"> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

あなたがng-messagesで見るかのようなエラーメッセージを表示したい場合。

var app = angular.module('myApp', []); 
 

 
app.controller('MyController', ['$scope', MyController]);  
 

 
function MyController($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.name2 = 'hello'; 
 
} 
 
app.directive('formControl', function() { 
 
    return { 
 
    restrict: 'C', 
 
    require: 'ngModel', 
 
    link: function (scope, element, attrs, ngModel) { 
 

 
     // Add class filled to form-control's that have a value 
 
     if(ngModel.$viewValue){ 
 
     element.parent().addClass('filled'); 
 
     } 
 

 
     // Any event here that can tell me that the value was changed by the angular so I can put the css class 
 
     element.bind('blur', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().removeClass('active'); 
 
     }).bind('focus', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().addClass('active'); 
 
     }); 
 
     scope.$watch(function(){return ngModel.$viewValue;}, function(newValue){ 
 
     if('required' in attrs){ 
 
      if(newValue){ 
 
      element.parent().addClass('filled'); 
 
      } else { 
 
      element.parent().removeClass('filled'); 
 
      } 
 
     } 
 
     }) 
 

 
    } 
 
    }; 
 
});

.filled{ 
 
    background-color:lightblue; 
 
} 
 
.active{ 
 
    border:1px solid red; 
 
} 
 
div.filled > .error-message{ 
 
    display:none; 
 
} 
 
div:not(.filled) > .error-message{ 
 
    display:block; 
 
} 
 
.error-message{ 
 
    text-align:center; 
 
    margin-top:5px; 
 
}

<div ng-controller='MyController' ng-app="myApp"> 
 
    <label> The below input does not have required attribute</label> 
 
    <input type="text" class="form-control" ng-model="name"> 
 
    <br> 
 
    <br> 
 
    <label> The below input has required attribute</label> 
 
    <input type="text" class="form-control" required ng-model="name2"> 
 
    <div class="error-message"> This Field is required</div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

私は、これはあなたの問題を解決を願って:)