$ error.required kommt als falsch auf Knopf klicken

Question

Ich habe Attribut ng-required="true" in meiner Dropdownliste gesetzt.

Auf Knopfdruck Ich möchte das Dropdown überprüfen. Aber anfänglich zeigt $ error.required false an, was true sein sollte.

Wenn ich jedoch den Wert der Dropdown-Liste $ Error.Require ändern funktioniert einwandfrei.

<select id="ddlsolution" name="ddlsolution" ng-model="Detail.CCESolution" ng-options="solutionName.id as solutionName.type for solutionName in solutionNames" ng-required="true"> 
              <option value="">-- Select Solution --</option> 
             </select> 

<button type="submit" class="gradient-button1" style="float: right; margin-left: 8px; margin-right: 10px;" ng-click="validateFields()">Submit</button> 


function validateFields() { 
      if ($scope.registrationForm.ddlsolution.$error.required) { 
       alert("error"); 
      } 
      else { 
       alert("no error"); 
      } 
     } 

Answer 1

versuchen, etwas wie folgt aus:

var app = angular.module("Demo", []); 
 
app.controller("AppController", function($scope) { 
 
    $scope.validateFields = function(valid) { 
 
    if (valid) { 
 
     alert("valid") 
 
    } else { 
 
     alert("invalid") 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="Demo"> 
 
    <div ng-controller="AppController"> 
 
    <div ng-form="regForm"> 
 
     <select id="ddlsolution" name="ddlsolution" ng-model="selectedDdl" required> 
 
     <option value="">-- Select Solution --</option> 
 
     <option value="value1">Value 1</option> 
 
     <option value="value2">Value 2</option> 
 
     </select> 
 

 
     <button type="submit" class="gradient-button1" ng-click="validateFields(regForm.$valid)">Submit</button> 
 
    </div> 
 
    </div> 
 
</div>

http://jsfiddle.net/03L3faq5/9/

Hoffe, es helpful.Thanks sein wird.

Answer 2

Sie $invalid verwenden können, wie als

var app = angular.module("Demo", []); 
 

 
app.controller("AppController", function($scope) { 
 
    
 
    $scope.validateFields = function() { 
 
     
 
    if($scope.myForm.ddlsolution.$invalid){ 
 
     alert("error"); 
 
    }else{ 
 
    alert("no error"); 
 
    } 
 
     
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="Demo"> 
 
    <div ng-controller="AppController"> 
 
    <div ng-form="myForm"> 
 
     <select id="ddlsolution" name="ddlsolution" ng-model="Detail.CCESolution" required> 
 
     <option >-- Select Solution --</option> 
 
     <option value="value1">Value</option> 
 
     <option value="value2">Value</option> 
 
     </select> 
 

 
     <button type="submit" class="gradient-button1" style="float: right; margin-left: 8px; margin-right: 10px;" ng-click="validateFields()">Submit</button> 
 
    </div> 
 
    </div> 
 
</div>