Angular.js 验证消息未显示

Question

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

我添加了一个名为 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);

这里是视图

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

默认情况下，一次只会显示一条消息，而这 取决于模板中消息的优先级。 （这可以通过使用 ng-messages-multiple 或 multiple 指令容器上的属性。）

Answer 2

我找到了答案，但总是拼错了。我做了一个复制和粘贴，只是更改了该字段的名称。当我更改名称时，虽然我进行了查找和替换。这导致我的输入缺少名称值。如果你看第一个，它会显示address1="address1"

我的查找和替换替换了名称，导致所有这些都缺少名称标签。一旦我修复了所有错误，就会出现。