Question

我有以下2个表单控件，需要知道如何使用AngularJS验证它们。国家必须有空白以外的值。

如果有多个单选按钮，则必须选择一个。

我如何在AngularJS中完成此任务？

<table class="t_100">
    <tbody>
        <tr>
            <td>
                <select ng-model="selectedCES" name="state_select" id="state_select_{{PID}}" style="float:left;"
                        ng-options="item as StatesArray[item.CES] for item in CEIC | orderBy: 'CES'"
                        ng-change="stateSelected(this)">
                    <option value="">Please select a State</option>
                </select>
            </td>
        </tr>
        <tr ng-repeat="item in CEIC" class="CEIC" ng-show="selectedCES.CES==item.CES" id="CEIC_{{PID}}_{{item.CES}}">
            <td style="text-align: center;" class="CTC" ng-repeat="item2 in item.CTC" id="CEIT_{{item2.CETID}}" width="{{(1/item.CTC.length)*100|number:0}}%">
                <input type="radio" ng-if="(item.CTC.length>1)" class="lt_" id="lt_{{PID}}_{{item2.CETID}}" name="lt_{{PID}}" value="{{item2.CETID}}" ng-click="stateSelected(this)">
                <input type="hidden" ng-if="(item.CTC.length<2)" class="lt_" id="lt_{{PID}}_{{item2.CETID}}" name="lt_{{PID}}" value="{{item2.CETID}}">
                <label ng-show="(item.CTC.length>1)" class="lt_{{PID}}_{{item2.CETID}}" for="lt_{{PID}}_{{item2.CETID}}" id="lbl_lt_{{PID}}_{{item2.CETID}}">{{item2.LT}}<br />HR: {{item2.HR}}</label>
                <input type="hidden" class="hr_" value="{{item2.HR}}" id="hr_{{PID}}_{{item2.CETID}}" name="hr_{{PID}}_{{item2.CETID}}">
                <input type="hidden" class="un_" value="{{item2.UN}}" id="un_{{PID}}_{{item2.CETID}}" name="un_{{PID}}_{{item2.CETID}}">
                <input type="hidden" class="pr_" value="{{item2.PR}}" id="pr_{{PID}}_{{item2.CETID}}" name="pr_{{PID}}_{{item2.CETID}}" ng-model="itemPR">
            </td>
        </tr>
    </tbody>
</table>

表单标记如下所示：

<form id="ce_info" ng-submit="send()" ng-show="selectedCEState !=''">

这是stateSelected处理程序和发送处理程序：

// stateSelected handler
$scope.stateSelected = function () {
    var hasOnlyOne = ($scope.selectedCES.CETC.length == 1);
    var item2 = this.item2;
    if($scope.no_ce) {
        $scope.CEI.Declined = 1;
    } else {
        if(item2 == undefined) {
            item2 = $scope.selectedCES.CETC[0];
            $scope.CEI.CES = $scope.selectedCES.CES;
            $scope.CEI.CELT = $scope.selectedCES.CELL;
            if(hasOnlyOne) {
                $scope.itemPR = item2.PR;
                $scope.attendee.PR = item2.PR;
                $scope.CEI.PR = item2.PR;
                $scope.CEI.HR = item2.HR;
                $scope.CEI.UN = item2.UN;
            } else {
                $scope.itemPR = 0;
                $scope.attendee.PR = 0;
            }
        } else {
            $scope.itemPR = item2.PR;
            $scope.attendee.PR = item2.PR;
            $scope.CEI.PR = item2.PR;
            $scope.CEI.HR = item2.HR;
            $scope.CEI.UN = item2.UN;
        }
        $scope.CEI.CES = $scope.selectedCES.CES;
        $scope.CEI.CELT = $scope.selectedCES.CELL;
        $scope.CEI.CETID = item2.CETID;
    }
    $scope.SP.CEI = $scope.CEI;
    $scope.attendee.SP = $scope.SP;
}

// Send handler
$scope.send = function () {
    $scope.attendee.SP = $scope.SP;
    $scope.CEI.CEFN = $scope.CEFN;
    $scope.CEI.CELN = $scope.CELN;
    $scope.CEI.CES = $scope.selectedCES.CES;
    $scope.CEI.CEL = $scope.CELNum;
    $scope.attendee.SP.CEI = $scope.CEI;
    // /Home/SCE
    $("#csubmit").attr('disabled', true);
    $("#cwait").show();
    $http.post("/Home/SCE", JSON.stringify($scope.attendee))
        .success(function(data, status, headers, config) {
                var url = "/";
                url += data.controller;
                url += "/";
                url += data.action;
                if(data.link!="") {
                    url+= "/?link="+data.link;
                }
                if(data.msg!="") {
                    url+= "/msg="+data.msg;
                }
                $("#ce_submit").attr('disabled', false);
                $("#ce_wait").hide();
                window.location = url;
        });            
}

Answer 1

在控制器本身中设置select和radio输入的初始值。 E.g。

$scope.selectedCES = 'whatever'

请注意，您还必须在收音机输入中添加ng-model。

验证何时需要输入：

<select ... required="true">
  ...
</select>

<input ... required="true"/>

请参阅角度文档：

https://docs.angularjs.org/api/ng/directive/select

https://docs.angularjs.org/api/ng/directive/input

https://docs.angularjs.org/guide/forms

Answer 2

假设您提供的代码与控制器相关，您可以在控制器范围内放置一个方法，在提交表单之前检查输入/选择/无线电/任何内容。

$scope.isFormValid = function(){
 if($scope.selectedCES.value != "") {
    return true;
 }
 // feel free to put other statements that returns true
 //
 // or
 else {
    return false;
 }
}

$scope.submitForm = function(){
  if($scope.isFormValid()){
    document.getElementById('myForm').submit();
  }
  else {
    console.log("$scope.isFormValid() = false;");
  }
}

在你看来：

<form id="myForm" ng-submit="submitForm()">

这不是一个完整的答案，但我认为这可以帮助你在项目上做到这一点。

选择和无线电的AngularJS表单验证

2 个答案: