AngularJSで複数の入力フィールドを要求するにはどうすればよいですか？

2つの入力を持つ単純なページを作成しようとしていますが、これは空でないようにrequiredにする必要があります。AngularJSで複数の入力フィールドを要求するにはどうすればよいですか？

ここで（自己完結型）があることを行うためのコードです：

<!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を両方とも設定していましたが、数字フィールドが更新されたときにテキストフィールドを更新する原因になりました。

明らかにうまくいきませんでしたので、私のコードに示されているように、入力用に異なるモデルを使用しようとしました。しかし、両方の入力が0の値（まだ空白でなければならないテキストフィールドであっても）を持ち、両方の入力を入力することも編集することもできません。

私は何を間違っているのですか。また、両方の入力を角で別々にrequiredにするにはどうすればよいですか？

出典

2016-07-20 Jashaszun

最初に間違っていることは、モデルに不正な識別子を使用していることです。 req-numberは変数の有効な識別子ではありません。（これらのモデルはすべて実際には$scope.variableNameと呼ばれ、$scope.req-numberと想像してください）。したがって、あなたの入力は読み取り専用になります。ブラウザのコンソールを調べると、実際にそれを見ることができます。

第2に、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/>

Plunker with correct code

PSと小型の発言は、終了タグが<input>

出典

2016-07-20 18:58:08

おかげでたくさんのために無視されます！ '' ng-model''が何をしているのか、私はむしろ混乱していたようだ。私は、（1）スコープ内の変数になること、（2）この変数が入力の値になることを認識していませんでした。私はモデルがまったく別のものだと思った。 – Jashaszun

'ngInit'ディレクティブは、docsのhttps://docs.angularjs.org/api/ng/directive/ngInitのように、この場合は使用しないでください。この場合、**コントローラ**で値を開始してください。 – developer033

@ developer033、それは私が通常やっていることです。しかし質問に非常に単純なコードとコントローラが含まれていたので、私は 'ng-init'を提案しました。あなたの発言を私の答えに反映させます –

AngularJSで複数の入力フィールドを要求するにはどうすればよいですか？

答えて

関連する問題