CODEWITHSUNDEEP
javascriptangularjshtml
John Gathogo
John Gathogo

Reputation: 4655

Validation using AngularJS

I would really appreciate your help. Am using AngularJS to render questions in a quiz in the manner below:

<form name="form1" ng-controller="quizController" ng-submit="submit()">
    <div class="form-group">
        <span class="col-xs-3">What is your favorite color?</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

ng-required is enforcing the requirement that one of the option must be selected. When no option is selected and the user clicks the submit button, all the options are highlighted in red and the text You must choose an option appears next to the first option. I would like to tweak this behaviour such that when no option is selected, it is the question text that appears in red. Thanks for your assistance

Upvotes: 0

Views: 89

Answers (2)

cubbuk
cubbuk

Reputation: 7920

Here is an example to show how you can do it. Basically you need to use $submitted and $invalid properties of FormController of AngularJS. Take a look at them here: https://docs.angularjs.org/api/ng/type/form.FormController

I used bootstrap's has-error class to highlight the question, if the color is not selected and the form is submitted the question will be highlighted red. I added novalidate attribute to disable html5 validation and used only angular's validations.

angular.module("myApp", []).controller("quizController", function($scope) {
  $scope.submit = function() {
    console.log("oley");
  }
})
.has-error {color: red}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp">
  <form name="form1" ng-controller="quizController" ng-submit="submit()" novalidate>
    <div class="form-group">
      <span class="col-xs-3" ng-class="{'has-error' : form1.color.$invalid && form1.$submitted}">What is your favorite color?</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </form>
</div>

Upvotes: 2

wero
wero

Reputation: 32980

Here is a solution based on CSS.

You could wrap all radio texts into an own span:

<span>
   <input type="radio" name="color" ng-model="color" ng-required="true"  value="Red" />
   <span>Red<span>
</span>
....

and then use the following selector to set the text-color of these spans to red if the radio button is invalid (because its value is missing):

input[type=radio]:invalid + span { color: red; }

Besides I think you only need to place the ng-required attribute only on one radio button (and if its is constant you could replace it by a simple required).

Upvotes: 0

Related Questions