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

在你的模型中，你说地址2不是必需的：

  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"

我的查找和替换已替换名称，导致所有名称都缺少名称标记。一旦我确定所有错误都出现了。

Angular.js验证消息未显示

2 个答案: