0

I've done Angular.js projects in the past, but this is my first mean stack project. I'm using the meanjs.org template as a starting point. When you use the yo generator you can add modules, and it will create a module for you with all the server and client models, controllers, views etc.

I added a module called Company, and by default it only adds in a name field and makes it required. I've basically taken the model and added in additional fields also making them required. I added the same fields to the form. When you try to submit the form it is making all the fields required, even the ones I made not required, and none of the errors except the name validation show up.

Here is the model

'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);

And here is the 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>

2 Answers 2

1

In your model you are saying that address2 is not required:

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

But then in your view you are stating that it is required:

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

You need to remove required from that input.

And the reason that only one error message is showing is this (and I am quoting the 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.)

Sign up to request clarification or add additional context in comments.

1 Comment

Ok, so I'm with you on everything except the error message. When the name is filled in it doesn't show the next error, but it doesn't submit due to it being required.
0

I found the answer, as always it was something misspelled. I did a copy and paste and just changed the name of the field. When I changed the name though I did a find and replace. This caused my input to have a missing name value. If you look at the first it shows address1="address1"

My find and replace had replaced name causing all of them to be missing the name tag. As soon as I fixed that all the errors showed up.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.