1

I have a form that asks the user when their contract ends and they can either put in a month or year or select not sure using a radio button. I have required on the 2 select fields and not on the radio button. I also have a function that changes the value of the select fields to "" when they click on the radio button.

The problem I am running into is if the user clicks the radio button, the selects are no longer valid as they are required. Is there anyway to still make the form valid if they choose the radio button?

Here is the part of the form I am referring to:

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

Not sure if needed but here is 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);

}]);

Thanks in advance!

1 Answer 1

1

You can this by set condition inside ng-required="expression"

In your case the ng-required directive will look like below.

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>

Hope this could help you. Thanks.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.