Question

我在下面尝试的是代码控制器

$scope.updatemonth = function() {
        if ($scope.anniversaryMonth != null || $scope.anniversaryMonth != undefined || $scope.anniversaryMonth != "") {
            $scope.dateMonthErrorMsg = "";
            $scope.dateMonthErrorMsg2 = "";
        }
}
$scope.updatedate = function() {
        if ($scope.anniversaryDate != null || $scope.anniversaryDate != undefined || $scope.anniversaryDate != "") {
            $scope.dateMonthErrorMsg = "";
            $scope.dateMonthErrorMsg2 = "";
        }
}

HTML：

   <div class="form-group" ng-class="{ 'has-error': dateMonthErrorMsg || dateMonthErrorMsg2 || febMonthErrorMsg}">
                            <label class="control-label" for="selectAnniversary">ANNIVERSARY DATE</label>
                            <div class="clearfix">
                                <div class="col-sm-7 col-md-7 date-day-month">
                                    <div class="clearfix">
                                        <div class="col-xs-6 col-sm-5 col-md-5 date-day dateDay">
                                            <select ng-change="updatedate()" class="form-control" id="selectAnniversary" name="anniversaryDate" ng-options="selectedday for selectedday in days" ng-model="anniversaryDate">
                                                <option value="">DD</option>
                                            </select>
                                        </div>
                                        <div class="col-xs-6 col-sm-7 col-md-7 date-month">
                                            <select ng-change="updatedate()" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="help-block" role="alert">
                                <div ng-show="dateMonthErrorMsg">Please enter a valid anniversary date</div>
                                <div ng-show="dateMonthErrorMsg2">Please enter a valid anniversary date</div>
                                <div ng-show="febMonthErrorMsg">Please enter a valid anniversary date</div>
                            </div>
                        </div>

Answer 1

您可以在提交表单时在控制器中设置一个标志，并在html代码中使用相同的标志。以下是我验证输入的代码......

<div ng-class="{ 'has-error' : myForm.FirstName.$invalid && !myForm.FirstName.$pristine || (myForm.FirstName.$invalid && vm.myFormSubmitted)}">
<input class="form-control" type="text" id="FirstName" name="FirstName" placeholder="First Name"
       ng-maxlength="25" ng-model="vm.UserData.FirstName" ng-pattern="/^[A-Za-z]/" required autofocus/>
<span ng-show="myForm.FirstName.$dirty && myForm.FirstName.$error.pattern && vm.myFormSubmitted" class="error-text">Name should start with letters</span>

我想在点击提交时显示错误消息，如果有任何一个字段错过了选择，这些是可选的不需要字段

1 个答案: