使用 Angular 验证选择字段和单选按钮答案

【问题标题】：Validating Select field and Radio Button using Angular使用 Angular 验证选择字段和单选按钮
【发布时间】：2015-02-18 20:36:13
【问题描述】：

我有一个表单询问用户合同何时结束，他们可以输入一个月或一年，也可以使用单选按钮选择不确定。我需要 2 个选择字段而不是单选按钮。我还有一个功能，当他们点击单选按钮时，将选择字段的值更改为""。

我遇到的问题是，如果用户单击单选按钮，则选择不再有效，因为它们是必需的。如果他们选择单选按钮，是否仍然使表单有效？

这是我所指的表格部分：

<form name="residentialForm" id="residentialForm" novalidate="true" ng-submit="goToOffers()">
    <div class="question">
        <div class="questionBox">
            If so, when does the contract end?
        </div>
        <div class="inputGroup">
            Month <select ng-required="true" ng-model="form.contract_month" ng-change="contractSure()">
                <option value="">Select</option>
                <option ng-repeat="month in months" value="{{month.value}}">{{month.name}}</option>
            </select>
            Year <select ng-required="true" ng-model="form.contract_year" ng-change="contractSure()">
                <option value="">Select</option>
                <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
            </select>
            <label><input type="radio" name="contract_end_notsure" value="notsure" ng-click="contractNotSure()" ng-model="form.contract_end"/><span>Not Sure</span></label>
        </div>
    </div>
    <input type="submit" id="goToOffers" class="appSubmit" value="Submit"/>
    <pre>{{form | json}}</pre>
</form>

不确定是否需要，但这里是 javascript：

app.controller('ResidentialCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {

    $scope.years = [];
    $scope.months = [
        {value: '01', name: 'Janary'},
        {value: '02', name: 'February'},
        {value: '03', name: 'March'},
        {value: '04', name: 'April'},
        {value: '05', name: 'May'},
        {value: '06', name: 'June'},
        {value: '07', name: 'July'},
        {value: '08', name: 'August'},
        {value: '09', name: 'September'},
        {value: '10', name: 'October'},
        {value: '11', name: 'November'},
        {value: '12', name: 'December'}
    ];

    $scope.form = {};

    $scope.zipcode = $rootScope.zipcode;

    var currentYear = new Date().getFullYear();

    for(var i=0; i <= 1; i++) {

        var year = currentYear + i;

        $scope.years.push(year);

    }

    $scope.goToOffers = function() {

        console.log('submitted');

    };

    $scope.contractNotSure = function() {

        $scope.form.contract_month = "";
        $scope.form.contract_year = "";

    };

    $scope.contractSure = function() {

        $scope.form.contract_end = "";

    };

    console.log($scope.zipcode);

}]);

提前致谢！

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您可以通过在ng-required="expression" 中设置条件来实现这一点

在您的情况下，ng-required 指令将如下所示。

HTML

<div class="inputGroup">
    Month
    <select ng-required="form.contract_end!=notsure" ng-model="form.contract_month" ng-change="contractSure()">
        <option value="">Select</option>
        <option ng-repeat="month in months" value="{{month.value}}">{{month.name}}</option>
    </select>
    Year
    <select ng-required="form.contract_end!=notsure" ng-model="form.contract_year" ng-change="contractSure()">
        <option value="">Select</option>
        <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
    </select>
    <label>
        <input type="radio" name="contract_end_notsure" value="notsure" ng-click="contractNotSure()" ng-model="form.contract_end" /><span>Not Sure</span>
    </label>
</div>

希望这可以帮助你。谢谢。

【讨论】：