有効にするngMessagesを取得できません

Question

npmで角度メッセージをインストールし、ngMessagesをアプリケーションに渡しました。 私は私の部分のhtmlにディレクティブを追加しましたが、％エラー空白

テンプレート：あなたは、すなわちfriendForm.fname.$errorフォームを参照しようとしているので、あなたがfriendFormのご<form>name属性を与える必要が

<div ng-controller='friendsController'> 
    <form> 
     <table id='friendForm'> 
      <tr> 
       <td><input type='text' name='fname' ng-model='newFriend.fname' required/></td> 
       <td>First Name</td> 
      </tr> 
      <tr> 
       <td><input type='text' name='lname' ng-model='newFriend.lname' required/></td> 
       <td>Last Name</td> 
      </tr> 
      <tr> 
       <td><input type='date' name='bday' ng-model='newFriend.bday' required/></td> 
       <td>Birthday</td> 
      </tr> 
      <tr> 
       <td><input type='submit' value='Create' ng-click='addFriend()'/></td> 
      </tr> 
     </table> 

     <pre>friendForm.fname.$error = {{ friendForm.fname.$error.required | json }}</pre> 

     <div ng-messages='friendForm.fname.$error' style='color:red' role='alert'> 
      <p ng-message='required'>First Name is Required</p> 
     </div> 
     <div ng-messages='friendForm.lname.$error'> 
      <p ng-message='required'>Last Name is Required</p> 
     </div> 
     <div ng-messages='friendForm.bday.$error'> 
      <p ng-message='required'>Birthdate is Required</p> 
     </div> 
    </form> 
</div> 

Answer 1

。

がforms documentationから撮影：

形態はFormControllerのインスタンスです。フォームインスタンスは、任意で をname属性を使用してスコープに公開することができます。

同様に、ngModelディレクティブを持つ入力コントロールには、NgModelControllerの インスタンスが保持されます。このようなコントロールインスタンスは、 という名前の属性を入力コントロールに使用してフォームインスタンスのプロパティとして公開することができます。 name属性には、フォームインスタンスの プロパティの名前を指定します。

これは、フォームとコントロールの両方の内部状態が標準バインディング プリミティブを使用してビュー内のバインディングに使用できることを意味します。

ここでは、name属性を使用するコードを示します。

// app.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app', ['ngMessages']); 
 

 
})(); 
 

 
// main.controller.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').controller('friendsController', friendsController); 
 

 
    friendsController.$inject = []; 
 

 
    function friendsController() { 
 

 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-messages.min.js"></script> 
 

 
<div ng-app="app" ng-controller='friendsController'> 
 
    <form name="friendForm"> 
 
    <table id='friendForm'> 
 
     <tr> 
 
     <td><input type='text' name='fname' ng-model='newFriend.fname' required/></td> 
 
     <td>First Name</td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type='text' name='lname' ng-model='newFriend.lname' required/></td> 
 
     <td>Last Name</td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type='date' name='bday' ng-model='newFriend.bday' required/></td> 
 
     <td>Birthday</td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type='submit' value='Create' ng-click='addFriend()' /></td> 
 
     </tr> 
 
    </table> 
 

 
    <pre>friendForm.fname.$error = {{ friendForm.fname.$error.required | json }}</pre> 
 

 
    <div ng-messages='friendForm.fname.$error' style='color:red' role='alert'> 
 
     <p ng-message='required'>First Name is Required</p> 
 
    </div> 
 
    <div ng-messages='friendForm.lname.$error'> 
 
     <p ng-message='required'>Last Name is Required</p> 
 
    </div> 
 
    <div ng-messages='friendForm.bday.$error'> 
 
     <p ng-message='required'>Birthdate is Required</p> 
 
    </div> 
 
    </form> 
 
</div>