Question

我有一个表格，询问用户他们的合同何时结束，他们可以放入一个月或一年或选择不确定使用单选按钮。我需要在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);

}]);

提前致谢！

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

希望这可以帮到你。感谢。

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

1 个答案: