弹出窗口中的输入字段验证和弹出式Ionic的视图

Question

我正在创建Cordova Ionic应用程序。如何在弹出窗口中的输入字段上应用验证。我有两个字段：宽度和高度。我想在这两个字段上应用验证。

验证将是：

最小值：10 mm
最大值：1000 mm

此外，我还不知道为什么弹出窗口的视图是这样的（Android平板电脑下面给出的图片）。输入字段未显示。键盘打开时按钮消失。

键盘未打开时：

键盘打开时：

Answer 1

如果我理解正确，您希望为输入字段设置最大值和最小值。您可以通过执行以下操作来实现此目的：

<input name="width" type="number" min="10" max="1000">

您还可以使用Angular's ngChange directive来检测输入何时发生变化，并禁止用户低于10或高于1000，这是一个（不完整的）示例：

<强>控制器

$scope.input = {
  width: 10,
  height: 10
};

$scope.inputChanged = function(input) {
  if(input >= 10 && input <= 1000) {
    // This is valid input and should be left untouched.
  } else if(input < 10) {
    // If it is lower, set it to 10.
  } else if(input > 1000) {
    // If it is higher, set it to 1000.
  }
};

查看

<input name="height" type="number" min="10" max="1000" ng-model="input.height" ng-change="inputChanged(input.height)">
<input name="width" type="number" min="10" max="1000" ng-model="input.width" ng-change="inputChanged(input.width)">

上面的示例是故意的，仅仅是因为我认为没有必要使用JavaScript，HTML应该足够取决于您要查找的内容。此外，您还可以在用户提交值并显示错误时验证输入。