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

Question

I'm trying to write a simple page with a couple of inputs which should be required to not be empty. 我正在尝试用几个输入编写一个简单的页面，这应该required不要为空。

Here's the code to do that (self-contained): 这是执行此操作的代码（自包含）：

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

What I was hoping it would do is start with the text field being blank and red (invalid), and the number field being 100 and green (valid). 我希望它将以文本字段为空白和红色（无效）开始，而数字字段为100和绿色（有效）开始。

The first thing I tried was setting both ng-model s for the inputs to the same thing, but that caused the number field to update the text field when it was updated (but not the other way around). 我尝试的第一件事是将输入的两个ng-model都设置为同一事物，但这导致number字段在更新文本字段时进行更新（但反之则不行）。

Since that obviously didn't work, I tried using different models for the inputs, as shown in my code. 由于这显然行不通，因此我尝试使用不同的模型进行输入，如代码所示。 However, now both inputs have a value of 0 (even the text field, which should still be blank), and both inputs cannot be typed into or otherwise edited. 但是，现在两个输入的值均为0 （甚至是文本字段，该字段仍应为空白），并且两个输入都无法键入或进行其他编辑。

What am I doing wrong, and how do I just get both inputs to be required separately by Angular? 我在做什么错，我该如何使Angular分别required两个输入？

Answer 1

What you're doing wrong first of all is using illegal identifiers for models. 首先，您做错的是对模型使用非法标识符。 req-number is not a valid identifier for a variable. req-number不是变量的有效标识符。 (remember all of these models are actually refered as $scope.variableName , imagine $scope.req-number ). （请记住，所有这些模型实际上都称为$scope.variableName ，想象$scope.req-number ）。 Hence your inputs are made readonly. 因此，您的输入变为只读。 You can actually see that when you examine console of your browser. 当您检查浏览器的控制台时，您实际上可以看到它。

Second, html attribute value is ignored for input in this case. 其次，在这种情况下，将忽略html属性value作为input 。 Use controller function to set default values for your models. 使用控制器功能设置模型的默认值。

   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>

Alternatively you can use ng-init to initiate the model. 或者，您可以使用ng-init初始化模型。 However as mentioned by @developer0333, this is not recommended because initialization logic is part of business logic and with project evolving can get more complicated then just setting primitive values. 但是，如@ developer0333所述，不建议这样做，因为初始化逻辑是业务逻辑的一部分，并且随着项目的发展，可能会变得比设置原始值更复杂。

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

Plunker with correct code 具有正确代码的柱塞

PS and a small remark, closing tags are ignored for <input> 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