ngmodel 中的最小值和最大值验证答案

【问题标题】：Min and Max validation in ngmodelngmodel 中的最小值和最大值验证
【发布时间】：2021-04-16 03:30:57
【问题描述】：

我的html代码sn-p如下：

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

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

【问题讨论】：

标签： javascript html angularjs angular-material

【解决方案1】：

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

<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) {}]);

最后添加一个表单，并在其中输入一个类型号，其中设置了最小值、最大值、所需属性并具有名称。

   <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>

【讨论】：

【解决方案2】：

set type = range，其中 min 表示初始限制，max 表示最终限制，如下所示：

 <mat-form-field>
            <mat-label>Interest</mat-label>
            <input matInput type="range" min="0" max="100" [(ngModel)]="percentage" required>
          </mat-form-field>

【讨论】：

您应该解释您的代码以提高答案的质量。