Поле ввода с проверкой номера типа не работает

Question

Вот мой код, я пытаюсь подтвердить ввод, но проверки не работают

<form class="form-horizontal m-t-n" role="form">
 <div class="form-group">
    <div class="col-sm-4">
      <div class="input-group">
        <h3>{{ 'Select Quantity (max 5)' | translate }}</h3>
        <input type="number" name="quantity" ng-model="quantity" ng- change="setQuantity(quantity)" value="1"class="form-control" placeholder="{{ 'Quantity' | translate }}" ng-required integer >
      </div>
    </div>
 </div>     
</form><br>

Here is my setQuantity function:

$scope.setQuantity = function setQuantity( quantity ) {
    $scope.quantity = quantity;
}

Answer 1

Вы можете проверить действительность вручную, используя свойства ng-form и $valid. Обязательно укажите name для каждого поля внутри ng-form и получите доступ к полю в контроллере, используя frmName[fieldName].

var app = angular.module('mainApp', []);
app.controller('MyController', ['$scope', function($scope) {
  $scope.setQuantity = function setQuantity(quantity) {
    let isValid = $scope.myFrm['quantity'].$valid;
    if (quantity && isValid) {
      $scope.quantity = quantity;
    }

    console.log(quantity, isValid);
  }
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="mainApp">
  <div ng-controller="MyController">
    <ng-form class="form-horizontal m-t-n" name="myFrm">
      <div class="form-group">
        <div class="col-sm-4">
          <div class="input-group">
            <h3>{{ 'Select Quantity (max 5)' }}</h3>
            <input type="number" name="quantity" ng-model="quantity" ng-change="setQuantity(quantity)" value="1" class="form-control" placeholder="{{ 'Quantity' }}" max="5" min="1" ng-required> </div>
        </div>
      </div>
    </ng-form>
  </div>
</div>

Убедитесь, что поле input находится внутри тега form. Также вы можете просто использовать атрибут required html вместо ng-required. Проверьте ниже код.

<form>
  <input type="number" name="quantity" ng-model="quantity"
       ng-change="setQuantity(quantity)" min="1" max="5" value="1"
       class="form-control" placeholder="{{ 'Quantity' | translate }}"
       required integer>
  
  <br><br>
  
  <input type="submit" value="Submit">
</form>

Если вы должны использовать angular - js, тогда сохраняйте ng-required, не забудьте ввести код внутри ng-app

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="">
  <form>
    <input type="number" name="quantity" ng-model="quantity"
         ng-change="setQuantity(quantity)" min="1" max="5" value="1"
         class="form-control" placeholder="{{ 'Quantity' }}"
         ng-required integer>

    <br><br>

    <input type="submit" value="Submit">
  </form>
</div>