如何在AngularJS中要求多个输入字段？

Question

我正在尝试用几个输入编写一个简单的页面，这应该required不要为空。

这是执行此操作的代码（自包含）：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module("myApp", []);
            app.controller('myController', ['$scope', function($scope) {
            }]);
        </script>
        <style>
            input.ng-invalid {
                background-color: pink;
            }
            input.ng-valid {
                background-color: lightgreen;
            }
        </style>
    </head>
    <body ng-app="myApp">
        <div ng-controller="myController">
            Description: *<input type="text" id="input-description" ng-model="req-text" required></input><br/>
            Order: *<input type="number" id="input-order" ng-model="req-number" value="100" step="100" required></input><br/>
        </div>
    </body>
</html>

我希望它将以文本字段为空白和红色（无效）开始，而数字字段为100和绿色（有效）开始。

我尝试的第一件事是将输入的两个ng-model都设置为同一事物，但这导致number字段在更新文本字段时进行更新（但反之则不行）。

由于这显然行不通，因此我尝试使用不同的模型进行输入，如代码所示。 但是，现在两个输入的值均为0 （甚至是文本字段，该字段仍应为空白），并且两个输入都无法键入或进行其他编辑。

我在做什么错，我该如何使Angular分别required两个输入？

Answer 1

首先，您做错的是对模型使用非法标识符。 req-number不是变量的有效标识符。 （请记住，所有这些模型实际上都称为$scope.variableName ，想象$scope.req-number ）。 因此，您的输入变为只读。 当您检查浏览器的控制台时，您实际上可以看到它。

其次，在这种情况下，将忽略html属性value作为input 。 使用控制器功能设置模型的默认值。

   app.controller('myController', ['$scope', function($scope) {
       $scope.req_number = 100;
   }]);
   ....
   <div ng-controller="myController">
        Description: *<input type="text" ng-model="req_text" REQUIRED><br/>
        Order: *<input type="number" ng-model="req_number" required><br/>
   </div>

或者，您可以使用ng-init初始化模型。 但是，如@ developer0333所述，不建议这样做，因为初始化逻辑是业务逻辑的一部分，并且随着项目的发展，可能会变得比设置原始值更复杂。

<input type="number" ng-model="req_number" ng-init="req_number=100" required><br/>

具有正确代码的柱塞

PS和一句话， <input>结束标记被忽略

如何在AngularJS中要求多个输入字段？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-07-20 18:58:08

如何在AngularJS中要求多个输入字段？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-07-20 18:58:08

解决方案1
1 已采纳 2016-07-20 18:58:08