web-dev-qa-db-ja.com

アンギュラjsフォームを送信した後、すべての無効なフィールドに赤い境界線を表示します

入力フィールドがあるフォームがあります。それらの一部は必須フィールドであり、一部は電子メールフィールドです。

私は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;}

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

助けてください。

formsvalidationangularjs
39
Ranadheer Reddy

参照記事： 無効な入力フィールドangualrjsに赤色の境界線を表示

すべての入力フィールドで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に変更しています（質問で確認できます）。したがって、保存をクリックすると、submittedという名前のクラスがすべての入力フィールドに追加されます（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;
}
47
Ranadheer Reddy

デフォルトを使用できます。フォームが送信された場合、ng-submittedが設定されます。

https://docs.angularjs.org/api/ng/directive/form

例： http://jsbin.com/cowufugusu/1/

11
Alex Zaporozhets

実際のCodePenの例 を作成して、目標を達成する方法を示しました。

ng-clickに<form>を追加し、ボタンからロジックを削除しました。

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

更新されたテンプレートは次のとおりです。

<section ng-app="app" ng-controller="MainCtrl">
  <form class="well" name="addRelation" data-ng-click="save(model)">
    <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.$invalid">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.$invalid">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>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
    <input class="btn" type="submit" value="SAVE" />  
  </form>
</section>

およびコントローラーコード：

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

これがお役に立てば幸いです。

6
Adam Thomas