时间戳

首页 > 解决方案 > ngmodel 中的最小值和最大值验证

javascript - ngmodel 中的最小值和最大值验证

问题描述

我有如下的html代码片段：

<mat-form-field>
        <mat-label>Interest</mat-label>
        <input matInput type="number" [(ngModel)]="percentage" required>
      </mat-form-field>

输入数字应介于 1 到 100 之间。如何将 mat-error 添加到此验证中？

标签： javascripthtmlangularjsangular-material

解决方案

首先在您的脑海中添加这些脚本引用：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.2/angular-material.min.css"></script>

接下来添加一个 angularjs 应用程序和控制器。您可以在标签或单独的文件中执行此操作，然后在您的 html 中引用它：

   var app = angular.module('MyApp', ['ngMaterial', 'ngMessages']);

   app.controller("MyCtrl", ['$scope', '$timeout', function ($scope, $timeout) {}]);

最后添加一个表单，并在其中输入一个类型为 number 的输入，其中设置了 min、max、必需的属性并具有名称。

   <form method="post" name="form1" >
                <md-input-container class="md-icon-float md-block input-texts">
                    <label>input a number</label>
                    <input type="number" class="form-control" name="Number" ng-model="Number" required autofocus min="1" max="100" />
                    <div ng-messages="form1.Number.$error">
                        <div ng-message="required">please enter a number.</div>
                        <div ng-message="min">please enter a number greater than 1.</div>
                        <div ng-message="max">please enter a number smaller than 100.</div>
                    </div>
                </md-input-container>
                <button type="submit" class="btn btn-lg btn-success" ng-disabled="form1.Number.$invalid">
                    <span class="glyphicon glyphicon-pencil"></span> Submit
                </button>
            </form>


var app = angular.module('MyApp', ['ngMaterial', 'ngMessages']);

        app.controller("MyCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
        }]);
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.2/angular-material.min.css"></script>

</head>
<body>
    
    <div class="col-sm-12">
        <div ng-app="MyApp" ng-controller="MyCtrl">
            <form method="post" name="form1" >
                <md-input-container class="md-icon-float md-block input-texts">
                    <label>input a number</label>
                    <input type="number" class="form-control" name="Number" ng-model="Number" required autofocus min="1" max="100" />
                    <div ng-messages="form1.Number.$error">
                        <div ng-message="required">please enter a number.</div>
                        <div ng-message="min">please enter a number greater than 1.</div>
                        <div ng-message="max">please enter a number smaller than 100.</div>
                    </div>
                </md-input-container>
                <button type="submit" class="btn btn-lg btn-success" ng-disabled="form1.Number.$invalid">
                    <span class="glyphicon glyphicon-pencil"></span> Submit
                </button>
            </form>
        </div>
    </div>
    
</body>
</html>

推荐阅读