Question

我已经通过npm安装了angular-messages并将ngMessages传递给了我的应用程序。我将指令添加到我的部分html中，但％error error

模板：

<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

您需要提供<form> name friendForm属性，因为您正在尝试引用该表单，即friendForm.fname.$error。

取自forms documentation：

表单是FormController的一个实例。表单实例可以   可选地使用name属性发布到范围中。

类似地，具有ngModel指令的输入控件包含   NgModelController的实例。这样的控件实例可以   使用name属性作为表单实例的属性发布   在输入控件上。 name属性指定的名称   表单实例上的属性。

这意味着表单和控件的内部状态   可以使用标准绑定在视图中进行绑定   原语。

以下是使用name属性的代码。

＆＃13;

// 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() {

  }

})();

＆＃13;

<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>

＆＃13;

无法获取ngMessages进行验证

1 个答案: