Überprüfen Sie, ob die Winkelform im Controller gültig ist

Question

Ich bin neu in angularjs. Ich habe nach diesem Problem gesucht, aber ich habe einige Lösungen gefunden, aber keine von ihnen funktionierte für mich. Also, ich habe eine Form haben, die

HTML ist

<div class=" row col-xs-12 col-md-12"> 
    <div id="candidateInfoCorners" ng-show="showcandidateInfo"> 
     <div class="col-xs-12 col-md-12 info-header"> 
      <h>Candidate Information</h> 
     </div> 
     <form class="form-horizontal" role="form" name="Candidateform"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <label class="control-label col-sm-4 candidateNpInDaysLabelPosition" for="noticePeriod">Notice Period In Days :</label> 
        <div class="col-sm-4"> 
         <input type="number" min="0" ng-model="candidate.noticePeriod" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateNpInDaysInputPosition" 
          id="noticePeriod" placeholder="Noticeperiod" autocomplete="off" required=""> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <label class="control-label col-sm-4 candidateCTCLabelPosition" for="ctc">CCTC In Lakhs :</label> 
        <div class="col-sm-4"> 
         <input type="number" min="0" decimal-places="" ng-model="candidate.ctc" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateCTCInputPosition" 
          id="ctc" placeholder="CCTC" autocomplete="off" required=""> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <label class="control-label col-sm-4 candidateECTCLabelPosition" for="ectc">ECTC In Lakhs :</label> 
        <div class="col-sm-4"> 
         <input type="number" min="0" decimal-places="" ng-model="candidate.ectc" class="form-control ng-pristine ng-valid-min ng-invalid ng-invalid-required ng-touched candidateECTCInputPosition" 
          id="ectc" placeholder="ECTC" autocomplete="off" required=""> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <label class="col-sm-4 control-label candidateCommunicatioLabelPosition" for="communication">Communication :</label> 
        <div class="col-sm-4"> 
         <select class="selectpicker form-control ng-pristine ng-untouched ng-invalid ng-invalid-required candidateCommunicatioSelectPosition" 
          ng-model="candidate.communication" name="communication" id="communication" required=""> 
          <option value="" selected="">Communication</option> 
          <option value="Good">Good</option> 
          <option value="Average">Average</option> 
          <option value="Poor">Poor</option> 
         </select> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

Jetzt habe ich einen Controller, wo ich diese Form bin mit wie -

$scope.candidate = { 
    noticePeriod: '', 
    ctc: '', 
    ectc: '', 
    communication: '' 
}; 

Und mit Geschmack - $scope.candidate.noticePeriod während den Wert bekommen.

Jetzt habe ich keine submit für das Formular, dies wird auf eine andere Aktion passieren.

$scope.updateDocument = function() { 
    //Here I want to check the Form is valid or not 
    //I tried 
    //$scope.candidateform.$valid but I am getting an error like 
    Cannot read property '$valid' of undefined 
} 

Beide Funktionen sind in dem gleichen Controller

Kann jemand mir dabei helfen?

Answer 1

Sie benötigen ng-Form

Dies ist, wie ich es zu benutzen.

Ich mache eine übergeordnete Eigenschaft wie

$scope.myforms = { 
    Candidateform: {} 
}; 

//HTML will be 
<ng-form name="myForms.CandidateForm">...</ng-form> 

//TO VALIDATE I DO IT LIKE THIS 

$scope.myForms.CandidateForm.$submitted = true // This will run the validators as well, this means form has been submitted. 

//OR TO SUBMIT IT PROGRAMATICALLY 
$scope.myForms.CandidateForm.$valid 

Sie haben einige Fehler im Code, nennen Sie Ihre Form "Candidateform" und dann in der Steuerung werden Sie nur $ scope.candidate verwenden. Ändern Sie diesen auf $ scope.CandidateForm

function Controller($scope) { 
 
    $scope.master = {}; 
 
    $scope.user = { 
 
     name: "", 
 
     email: "" 
 
    }; 
 
    $scope.update = function(user) { 
 
     //$scope.master = angular.copy(user); 
 
     console.log($scope.master) 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html ng-app> 
 
<div ng-app="demo1"> 
 
    <div ng-controller="Controller"> 
 
    <ng-form novalidate class="simple-form" name="master"> 
 
     <legend>User Profile</legend> 
 
     <div class="control-group-error"> 
 
      <label class="control-label" for="input-error">Name</label> 
 
      <div class="controls">  
 
       <input type="text" name="username" ng-model="user.name"> 
 
       <span class="help-inline">Please correct the error</span> 
 
      </div> 
 
      <label>E-mail</label> 
 
      <input type="email" name="email" ng-model="user.email"> 
 
     </div> 
 
    </ng-form> 
 
    <button class="btn btn-primary" ng-click="update(user)">Save</button> 
 
     <br /> 
 
    <pre>{{master.$valid}}</pre> 
 
    </div> 
 
</div> 
 
</html>