角度驗證，當驗證失敗時向輸入字段添加類

Question

嘗試添加特定的類以在驗證失敗時輸入。下面是一個簡單的測試代碼。

控制器：

vm.emsg = ''; 
if ((parseFloat(vm.sum1) + parseFloat(vm.sum2)) < 100) { 
    vm.emsg = 'Hey, sum should be 100.'; 

    /*something to add class to input*/ 

    return false; 
} 

模板：

<form method="POST" enctype="multipart/form-data" ng-submit="vm.save($event)"> 
    <input type="text" ng-model="vm.sum1"> 
    <input type="text" ng-model="vm.sum2"> 
    <div class="error-message" ng-if="vm.emsg"> 
     {[vm.emsg]} 
    </div> 
</form> 

Answer 1

一種選擇是使用ngClass指令評估你的表情，你也可以評估你的表現來顯示相應的消息，像這樣：

// app.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app', []); 
 

 
})(); 
 

 
// main.controller.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').controller('MainController', MainController); 
 

 
    MainController.$inject = []; 
 

 
    function MainController() { 
 

 
    var vm = this; 
 

 
    } 
 

 
})();

.error-message { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MainController as vm"> 
 
    <input type="number" ng-model="vm.sum1"> 
 
    <input type="number" ng-model="vm.sum2"> 
 
    <div ng-class="{'error-message': vm.sum1 + vm.sum2 !== 100}"> 
 
    {{vm.sum1 + vm.sum2 !== 100 ? 'Hey, sum should be 100.' : ''}} 
 
    </div> 
 
    {{vm.sum1 + vm.sum2}} 
 
</div>

或者你可以使用ngIf指令，以顯示您的留言：

// app.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app', []); 
 

 
})(); 
 

 
// main.controller.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').controller('MainController', MainController); 
 

 
    MainController.$inject = []; 
 

 
    function MainController() { 
 

 
    var vm = this; 
 

 
    vm.sumsInvalid = sumsInvalid; 
 

 
    function sumsInvalid() { 
 

 
     // simply return true to display the error message via the ngIf directive 
 
     return parseFloat(vm.sum1) + parseFloat(vm.sum2) !== 100; 
 

 
    } 
 

 
    } 
 

 
})();

.error-message { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MainController as vm"> 
 

 
    <input type="number" ng-model="vm.sum1"> 
 

 
    <input type="number" ng-model="vm.sum2"> 
 

 
    <div class="error-message" ng-if="vm.sumsInvalid()"> 
 
    Hey, sum should be 100. 
 
    </div> 
 

 
    <p>{{vm.sum1 + vm.sum2}}</p> 
 

 
</div>