javascript - Angular.js 验证消息未显示

Question

我过去做过 Angular.js 项目，但这是我的第一个平均堆栈项目。我使用meanjs.org 模板作为起点。当您使用 yo 生成器时，您可以添加模块，它会为您创建一个包含所有服务器和客户端模型、 Controller 、 View 等的模块。

我添加了一个名为 Company 的模块，默认情况下它仅添加名称字段并将其设为必填字段。我基本上采用了该模型并添加了其他字段，这也使它们成为必需的。我将相同的字段添加到表单中。当您尝试提交表单时，它会将所有字段设置为必填字段，甚至包括我设置的非必填字段，并且除了名称验证之外不会显示任何错误。

这是模型

'use strict';

/**
 * Module dependencies.
 */
var mongoose = require('mongoose'),
  Schema = mongoose.Schema;

/**
 * Company Schema
 */
var CompanySchema = new Schema({
  name: {
    type: String,
    default: '',
    required: 'Please fill Company name',
    trim: true
  },
  address1: {
    type: String,
    default: '',
    required: 'Please fill Company addres',
    trim: true
  },
  address2: {
    type: String,
    default: '',
    required: false,
    trim: true
  },
  city: {
    type: String,
    default: '',
    required: 'Please fill Company city',
    trim: true
  },
  state: {
    type: String,
    default: '',
    required: 'Please fill Company state',
    trim: true
  },
  zip: {
    type: String,
    default: '',
    required: 'Please fill Company zip code',
    trim: true
  },
  phone: {
    type: String,
    default: '',
    required: 'Please fill Company phone number',
    trim: true
  },
  created: {
    type: Date,
    default: Date.now
  },
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  }
});

mongoose.model('Company', CompanySchema);

这是 View

<section>
  <div class="page-header">
    <h1>{{vm.company._id ? 'Edit Company' : 'New Company'}}</h1>
  </div>
  {{ vm.form.companyForm }}
  <br />
  {{ vm.company }}
  <div class="col-md-12">
    <form name="vm.form.companyForm" class="form-horizontal" ng-submit="vm.save(vm.form.companyForm.$valid)" novalidate>
      <fieldset>
        <div class="form-group" show-errors>
          <label class="control-label" for="name">Name</label>
          <input name="name" type="text" ng-model="vm.company.name" id="name" class="form-control" placeholder="Name" required>
          <div ng-messages="vm.form.companyForm.name.$error" role="alert">
            <p class="help-block error-text" ng-message="required">Company name is required.</p>
          </div>
        </div>
        <div class="form-group" show-errors ng-class="{ 'has-error': vm.form.companyForm.address1.$invalid }">
          <label class="control-label" for="address1">Address 1</label>
          <input address1="address1" type="text" ng-model="vm.company.address1" id="address1" class="form-control" placeholder="Address" required>
          <div ng-messages="vm.form.companyForm.address1.$error" role="alert">
            <p class="help-block error-text" ng-message="required">Company address is required.</p>
          </div>
        </div>
        <div class="form-group" show-errors>
          <label class="control-label" for="address2">Address 2</label>
          <input address2="address2" type="text" ng-model="vm.company.address2" id="address2" class="form-control" placeholder="Address" required>
        </div>
        <div class="form-group" show-errors>
          <label class="control-label" for="city">City</label>
          <input city="city" type="text" ng-model="vm.company.city" id="city" class="form-control" placeholder="City" required>
          <div ng-messages="vm.form.companyForm.city.$error" role="alert">
            <p class="help-block error-text" ng-message="required">Company city is required.</p>
          </div>
        </div>
        <div class="form-group" show-errors>
          <label class="control-label" for="state">State</label>
          <input state="state" type="text" ng-model="vm.company.state" id="state" class="form-control" placeholder="State" required>
          <div ng-messages="vm.form.companyForm.state.$error" role="alert">
            <p class="help-block error-text" ng-message="required">Company state is required.</p>
          </div>
        </div>
        <div class="form-group" show-errors>
          <label class="control-label" for="zip">Zip Code</label>
          <input zip="zip" type="text" ng-model="vm.company.zip" id="zip" class="form-control" placeholder="Zip Code" required>
          <div ng-messages="vm.form.companyForm.zip.$error" role="alert">
            <p class="help-block error-text" ng-message="required">Company zip code is required.</p>
          </div>
        </div>
        <div class="form-group" show-errors>
          <label class="control-label" for="phone">Phone Number</label>
          <input phone="phone" type="text" ng-model="vm.company.phone" id="phone" class="form-control" placeholder="Phone Number" required>
          <div ng-messages="vm.form.companyForm.phone.$error" role="alert">
            <p class="help-block error-text" ng-message="required">Company phone is required.</p>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-default">{{vm.company._id ? 'Update' : 'Create'}}</button>
        </div>
        <div ng-show="vm.error" class="text-danger">
          <strong ng-bind="vm.error"></strong>
        </div>
      </fieldset>
    </form>
  </div>
</section>

Answer 1

在您的模型中，您说不需要 address2:

  address2: {
    type: String,
    default: '',
    required: false,
    trim: true
  },

但在您看来，您是在声明这是必需的:

 <input address2="address2" type="text" ng-model="vm.company.address2" id="address2" class="form-control" placeholder="Address" required>

您需要从该输入中删除required。

仅显示一条错误消息的原因是(我引用 angular documentation for ng-messages ):

By default, only one message will be displayed at a time and this depends on the prioritization of the messages within the template. (This can be changed by using the ng-messages-multiple or multiple attribute on the directive container.)