ngmodel 中的最小值和最大值验证
[英]Min and Max validation in ngmodel
问题描述
我有 html 代码片段如下：
<mat-form-field>
<mat-label>Interest</mat-label>
<input matInput type="number" [(ngModel)]="percentage" required>
</mat-form-field>
输入数字应介于 1 到 100 之间。如何将 mat-error 添加到此验证中？
2 个解决方案
解决方案1
0 2021-01-27 04:34:20
首先在您的脑海中添加这些脚本引用：
<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 应用程序和 controller。 您可以在标签或单独的文件中执行此操作，然后在您的 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>
解决方案2
0 2021-01-27 06:27:14
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>
最小/最大验证 - Vuetify
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.