angularjs

by David Marshall

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link rel="stylesheet" href="https://material.angularjs.org/1.2.4/docs.css">

<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.js"></script>

<div ng-controller="AppCtrl" ng-cloak="" class="sliderdemoBasicUsage" ng-app="MyApp">
  <form name="myForm" ng-submit="submitForm()">
    <md-slider-container>
      <span>Rating</span>
      <md-slider min="10" max="60" ng-model="ob.rating" required name="Test" id="rating" aria-label="slider" />
      <md-input-container>
        <input type="number" ng-model="ob.rating" required name="Test" aria-controls="rating">
      </md-input-container>
    </md-slider-container>
    <input type="submit" value="Submit" />
    <br/>
    <code>{{myForm['Test']}}</code>
    <br/>
    <!--<code>myForm.input.$valid = {{myForm.ob.rating.$valid}}</code><br>
    <code>myForm.input.$error = {{myForm.ob.rating.$error}}</code><br>-->
    <code>myForm.$valid = {{myForm.$valid}}</code><br>
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
  </form>
</div>

JavaScript

angular.module('MyApp', ['ngMaterial', 'ngMessages'])
  .controller('AppCtrl', function($scope) {
    $scope.ob = {
      rating: null
    };
    this.$onInit = function() {
    }
    $scope.submitForm = function() {
      $scope.myForm.$setSubmitted()
      console.log($scope.myForm)
    }
  });