2017-05-06 12 views
0

学生名が利用できないときはいつでも私のフォームにエラーメッセージを表示しようとしています。AngularJS:エラーメッセージが印刷されない

私はにErrorMessageを取得していない午前生徒の名前の任意の値を入力せずに送信ボタンをクリックしたときに、私は今、このコードに

<form name="studentForm" novalidate 
      data-ng-submit="studentForm.$valid && enterStudentRecord()"> 

      <div>Student Name :</div> 
      <input data-ng-model="studentName" required> <span data-ng-show="studentForm.studentName.$touched && studentForm.studentName.$invalid">The name is required.</span><br> 
      <div>Street :</div> 
      <input data-ng-model="street"><br> 
      <div>City :</div> 
      <input data-ng-model="city"><br> 
      <div>State :</div> 
      <input data-ng-model="state"><br> 
      <div>zipcode :</div> 
      <input data-ng-model="zipcode"><br> <br> <br> 
      <button type="submit">Add Student Record</button> 
     </form> 

を試してみました。

助けてください!

答えて

0

あなたは検証を実行するための要素でname属性name="studentName"を追加入力

<input data-ng-model="studentName" name ="studentName" required> 
+0

nopes、動作していません – sparsh610

0
  • の名前を作成する必要があります。
  • クリック時に変数eventを送信ボタンに設定し、メッセージを表示している間に変数を取得します。

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form name="studentForm" novalidate data-ng-submit="studentForm.$valid && enterStudentRecord()"> 
 
      <div>Student Name :</div> 
 
      <input data-ng-model="studentName" name="studentName" required> 
 
      <span data-ng-show="submitted == true && studentForm.studentName.$error.required">The name is required.</span><br> 
 
      <div>Street :</div> 
 
      <input data-ng-model="street"><br> 
 
      <div>City :</div> 
 
      <input data-ng-model="city"><br> 
 
      <div>State :</div> 
 
      <input data-ng-model="state"><br> 
 
      <div>zipcode :</div> 
 
      <input data-ng-model="zipcode"><br> <br> <br> 
 
      <button type="submit" ng-click="submitted = true">Add Student Record</button> 
 
     </form> 
 
</div>

関連する問題