javascript - 检查 Angular 形式在 Controller 中是否有效

Question

我是 angularjs 的新手。我已经搜索过这个问题，但我找到了一些解决方案，但没有一个对我有用。所以，我有一个表格是

HTML

<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>

现在，我有一个 Controller ，我在其中使用这种形式，例如 -

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

并在获取值时像使用它一样 - $scope.candidate.noticePeriod。

现在我没有任何 submit 表单，这将发生在另一个 Action 上。

$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
}

两个函数都在同一个 Controller 中

谁能帮我解决这个问题？

Answer 1

你需要使用 ng-form

我就是这样做的。

我做了一个父属性，比如

$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

您的代码中有一些错误，您将表单命名为“Candidateform”，然后在 Controller 中您只使用 $scope.candidate。将其更改为 $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>