user3844782 user3844782 - 9 days ago 6
AngularJS Question

AngularJS validation message and showing no results and results div issue on submit

The following form shows a list of data on submit. I am trying to show no results found when there is no data on submit. I tried like shown below,it shows and hides the div. But when there is no options selected on form and click submit button it shows the no result div.How to show the no results div only when form validation succeeds and there is no data to display.

HTML

<div class="form-group" >
<label class="radio-inline">
<input name="sampleinlineradio" value="3" type="radio" ng-model="radioption"
ng-required="!radioption"> MAIN 1</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="1" type="radio" ng-model="radioption" >
Main 2</label>

<div ng-show="!radioption && buttonClicked">Please select one.</div>
</div>

<div class="form-group">
<label ng-repeat="branch in branches">
<input type="checkbox" name="selectedBranches[]" value="{{branch.value}}"
ng-model="branch.selected" ng-required="isOptionsRequired()" >
{{branch.name}}</label>

<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div>
</div>

<input type="button" ng-click="fetchresults()" value="submit" >

<div ng-show="buttonClicked">
<table> <thead>.....</thead>
<tbody>
<tr ng-show="results.length!=0" ng-repeat="r in results">
<td></td></tbody></table>
</div>

<div ng-show="buttonClicked">
<span ng-show="results.length==0 ">No results.</span>
</div>


Minimal Controller Code

$scope.fetchresults = function(){
$scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0], });
$scope.buttonClicked = true;
}


EDIT:
I used model to validate and $valid is also working, as suggested below.But Got a couple of glitches. If i click the button it does not show div. but after validation is over it shows automatically "no results" from the click before. How to stop this.And while it lists data when its available it shows "no results" for a second or so

Answer

You can check the below snippet, I have changed most of them in angular way with $invalid, $pristine, $submitted and $valid.

You can check the angular documentation to read about them.

Link 1, Link 2

Note: You can use a submit button and get rid of ng-click event and use ng-submit instead which can't be used in this snippet as form submit is not allowed. Comment the line form.$submitted = true; when you use a submit button.

var app = angular.module('app', []);
app.controller('TestController', function($scope){
  $scope.isFieldInvalid = function(field) {
     var form = $scope.testForm;
     return form[field].$invalid && (!form[field].$pristine || form.$submitted);
  };
  
  $scope.fetchResults = function(){
    var form = $scope.testForm;
    form.$submitted = true;  // comment this line if button type="submit"
    if(form.$valid){
      $scope.searching = true;
    
      $scope.results = [];
    
      var rnd = Math.random();
    
      if(rnd >= 0.5) {
        $scope.results = [{id: 1}, {id: 2}];
      }
      
      //$scope.results = Result.query({main: $scope.radioption,        branch: $scope.selection[0], });
      
      $scope.buttonClicked = true;
      $scope.searching = false; 
      
    }
    
   };
  
});

angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="testForm" ng-controller="TestController" ng-submit="fetchResults()" role="form" novalidate="">
<div class="form-group" ng-controller="TestController">
   <label class="radio-inline"> 
    <input name="sampleinlineradio" value="3" type="radio" ng-model="radioption" ng-required="true"> MAIN 1</label> 
   <label class="radio-inline"> 
   <input name="sampleinlineradio" value="1" type="radio"  ng-model="radioption" ng-required="true"  >
        Main 2</label>

 <div ng-show="isFieldInvalid('sampleinlineradio')">Please select one.</div>
</div>

<div class="form-group">
   <label ng-repeat="branch in branches"> 
   <input type="checkbox" name="selectedBranches[]" value="{{branch.value}}" 
          ng-model="branch.selected" ng-required="isOptionsRequired()" >
    {{branch.name}}</label>  

<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div>
</div>

<input type="button" value="submit" ng-click="fetchResults()" >

<div ng-show="buttonClicked && !searching">
    <table>  <thead></thead>
      <tbody>
       <tr ng-show="results.length!=0"  ng-repeat="r in results">
       <td>{{r.id}}</td></tbody></table>
</div>

<div ng-show="buttonClicked && !searching"> 
<span ng-show="results.length==0 ">No results.</span> 
</div>
</form>

Comments