web-dev-qa-db-ja.com

Angularは 'required'フィールドに 'ng-invalid'クラスを自動的に追加しています

私はangularアプリを作成しています。このアプリにはいくつかのフォームが設​​定されています。送信前に入力が必要なフィールドがいくつかあります。

<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>

ただし、アプリを起動すると、送信ボタンがクリックされる前、またはユーザーがフィールドに何かを入力する前でも、フィールドは「無効」として表示され、クラスは「ng-invalid」および「ng-invalid-required」として表示されます。

それらの2つのクラスがすぐに追加されるのではなく、ユーザーがフォームを送信した後、または対応するフィールドに何か間違ったことを入力した場合に、どうすれば確認できますか？

javascriptformsangularjsrequired
32
Spearfisher

入力は空であるため、インスタンス化されると無効になるため、Angularは_ng-invalid_クラスを正しく追加します。

あなたが試すかもしれないCSSルール：

_input.ng-dirty.ng-invalid {
  color: red
}
_

これは基本的に、ページが読み込まれ、$scope.formName.setPristine(true)によって初期状態にリセットされず、何かがまだ入力されておらず、テキストがred。

Angularフォームのその他の便利なクラス（ 将来の参照のための入力 を参照）

_ng-valid-maxlength_-_ng-maxlength_が渡されるとき
_ng-valid-minlength_-_ng-minlength_が合格したとき
_ng-valid-pattern_-_ng-pattern_が合格したとき
_ng-dirty_-フォームがロードされてからフォームに何かが入力されたとき
_ng-pristine_-ロードされてからフォーム入力に何も挿入されていない場合（またはフォームのsetPristine(true)を介してリセットされた場合）
_ng-invalid_-検証が失敗したとき（required、minlength、カスタムのものなど）

同様に、これらのすべてのパターンと作成されたカスタムパターンには_ng-invalid-<name>_もあります。

67
Ryan Q

この投稿のおかげで、このスタイルを使用して、bootstrapで必要なフィールドが表示されたときにユーザーが既に何も入力する機会がなかったときに自動的に表示される赤い境界線を削除します。

input.ng-pristine.ng-invalid {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow:none;
}
7
user2344489

フィールドは空であるため無効であるため、ng-invalidおよびng-invalid-requiredクラスは適切に追加されます。

クラスng-pristineを使用して、フィールドが既に使用されているかどうかをチェックできます。

2
Minko Gechev

フォームが送信されたとき、またはフィールドが無効なときに、検証用のクラスを動的に追加してみてください。フォーム名を使用して、「name」属性を入力に追加します。ブートストラップの例：

<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
    <label class="col-sm-2 control-label" for="username">Username*</label>
    <div class="col-sm-10 col-md-9">
        <input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
    </div>
</div>

フォームにng-submit = ""属性があることも重要です。

<form name="myForm" ng-submit="checkSubmit()" novalidate>
 <!-- input fields here -->
 ....

  <button type="submit">Submit</button>
</form>

検証用のオプション関数をフォームに追加することもできます。

//within your controller (some extras...)

$scope.checkSubmit = function () {

   if ($scope.myForm.$valid) {
        alert('All good...'); //next step!

   }
   else {
        alert('Not all fields valid! Do something...');
    }

 }

これで、アプリをロードすると、フォームが送信されたとき、またはフィールドがタッチされたときにのみ、クラス「has-error」が追加されます。の代わりに：
！myForm.username。$ pristine

以下も使用できます。
myForm.username。$ dirty

0
grindking