如何在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