AngularJSで送信時に検証エラーメッセージを表示する 質問する

AngularJSで送信時に検証エラーメッセージを表示する 質問する

送信をクリックした場合に検証エラー メッセージを表示する必要のあるフォームがあります。

こちらは動作中のプランカー

 <form name="frmRegister" ng-submit="register();" novalidate>
      <div>
        <input placeholder="First Name" name="first_name" type="text" ng-model="user.firstName" required />
        <span ng-show="frmRegister.first_name.$dirty && frmRegister.first_name.$error.required">First Name is required</span>
      </div>
      <div>
        <input placeholder="Last Name" name="last_name" type="text" ng-model="user.lastName" required />
        <span ng-show="frmRegister.last_name.$dirty && frmRegister.last_name.$error.required">Last Name is required</span>
      </div>
      <div>
        <input placeholder="Email" name="email" type="email" ng-model="user.email" required />
        <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required">Email is required.</span>
        <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.email">Invalid Email address.</span>
      </div>
      <input type="submit" value="Save" />
      <span ng-show="registered">YOU ARE NOW REGISTERED USER</span>
 </form>

ユーザーが変更を開始すると、検証は正常に機能します。ただし、何も入力せずに送信をクリックすると、エラー メッセージは表示されません。

これを実現する考えはありますか?または、他の方法では、送信ボタンをクリックしたときに各入力フィールドを$dirtyにするにはどうすればよいでしょうか?

ベストアンサー1

このバイオリンを見つけたhttp://jsfiddle.net/thomporter/ANxmv/2/これは、コントロールの検証を実行するための気の利いたトリックです。

基本的に、スコープメンバーを宣言しsubmitted、送信をクリックしたときにそれをtrueに設定します。モデルエラーバインディングはこの追加の式を使用して、次のようなエラーメッセージを表示します。

submitted && form.email.$error.required

アップデート

指摘されているように@Hafez のコメント(彼に賛成票を投じてください!)、Angular 1.3+ ソリューション単純に言えば:

form.$submitted && form.email.$error.required

おすすめ記事