42

いくつかの入力フィールドがあるフォームがあります。一部は必須フィールドで、一部は電子メールフィールドです。

必須フィールドには HTML5の必須属性を使用し、電子メール フィールドにはtype="email"属性を使用しています。

私の質問は、送信ボタンをクリックした後、すべての無効なフィールドに赤い境界線を表示する必要があることです。

これは私のフォームです：

<form name="addRelation">
  <label>First Name</label>
  <input type="text" placeholder="First Name" data-ng-model="model.firstName"     id="FirstName" name="FirstName" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/>
  <label>Last Name</label>
  <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/>
  <label>Email</label>
  <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>

  <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />  
  </form>

そして私の保存機能。

$scope.save= function (model) {
    if ($scope.addRelation.$valid) {
        //form is valid- so save it to DB
    }
    else {
        //if form is not valid set $scope.addRelation.submitted to true
        $scope.addRelation.submitted=true;
    }
};
 })

今、何も入力せずに保存ボタンをクリックすると、すべてのエラー(スパン)が表示されます。しかし、すべての無効なフィールドに赤い枠を表示したいです。

私は次のケースを試しました：

input.ng-dirty.ng-invalid{border:1px solid black;}

ただし、ユーザーが送信ボタンを直接クリックすると失敗します (入力フィールドに触れずに)。

input.ng-invalid{border:1px solid black;}

これにより、ユーザーがサインアップ フォームを開くとすぐに赤い境界線が表示されます。

助けてください。

4

3 に答える 3

47

参考記事:無効な入力フィールドに赤い境界線を表示する

以下のように、すべての入力フィールドで ng-class を使用しました

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

保存ボタンをクリックすると、newEmployee.submittedの値がtrueに変更されます(質問で確認できます)。したがって、保存をクリックすると、送信されたという名前のクラスがすべての入力フィールドに追加されます (最初に angularjs によって追加された他のクラスがいくつかあります)。

だから今、私の入力フィールドにはこのようなクラスが含まれています

class="ng-pristine ng-invalid submitted"

現在、以下のCSSコードを使用して、すべての無効な入力フィールドに赤い境界線を表示しています（フォームを送信した後）

input.submitted.ng-invalid
{
  border:1px solid #f00;
}

ありがとうございました ！！

アップデート：

すべての入力要素に適用する代わりに、フォーム要素に ng-class を追加できます。したがって、フォームが送信されると、新しいクラス (送信済み) がフォーム要素に追加されます。次に、以下のセレクターを使用してすべての無効な入力フィールドを選択できます

form.submitted .ng-invalid
{
    border:1px solid #f00;
}
于 2013-10-02T07:21:24.613 に答える