Array of elements is not working correctly

I have the following mongoose schema

var MySchema = new Schema({
    field1: [{
        format: {
            type: String,
            required: true
        },
        value: {
            type: String,
            required: true
        }
    }],
    field2: [{
        format: {
            type: String,
            required: true
        },
        value: {
            type: String,
            required: true
        }
    }]
});

To get the input for this model I am creating a form which has the array of controls and the code is below

Even If if try to use the $scope.field1[<index>] it give the error that

TypeError: Cannot read property 'field1' of undefined

<div class="form-group">
  <div class="col-md-12 padding-left-0">
    <label for="question">Field1 Values</label>
  </div>
  <div class="col-md-12" ng-repeat="(optionKey, optionValue) in [0,1]">
    <ng-form name="field1Form{{optionKey}}">
      <div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_format.$invalid }">
        <label for="field1_format">Type</label>
        <select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[$index].format" required>
          <option value="text" selected="selected">Text</option>
          <option value="image">Image</option>
        </select>
        <div ng-show="submitted && field1Form{{optionKey}}.field1_format.$invalid" class="help-block">
          <p ng-show="field1Form{{optionKey}}.field1_format.$error.required">Field1 type is required</p>
        </div>
      </div>

      <div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_value.$invalid }">
        <div class="col-md-12">
          <label for="field1_value">Value</label>
        </div>
        <div class="col-md-12">
          <input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[$index].value" placeholder="Enter field1 value" required/>
          <div ng-show="submitted && field1Form{{optionKey}}.field1_value.$invalid" class="help-block">
            <p ng-show="field1Form{{optionKey}}.field1_value.$error.required">Field1 value is required</p>
          </div>
        </div>
      </div>
    </ng-form>
  </div>
</div>

<div class="form-group col-md-12 padding-left-0" data-ng-show="true">
  <div class="col-md-12 padding-left-0"><label>Field2 Values</label></div>
  <div class="col-md-6" data-ng-repeat="i in [0,1]">
    <ng-form name="field2Form{{i}}">
      <label>Value-{{i+1}}</label>
      <div class="col-md-12">
        <div class="col-md-4" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_format.$invalid }">
          <label for="field2_format">Type</label>
          <select class="form-control" name="field2_format" id="field2_format" data-ng-model="form.field2[$index].format" required>
            <option value="text">Text</option>
            <option value="image">Image</option>
          </select>
          <div ng-show="submitted && field2Form{{i}}.field2_format.$invalid" class="help-block">
            <p ng-show="field2Form{{i}}.field2_format.$error.required">Field2 type is required</p>
          </div>
        </div>

        <div class="col-md-7" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_value.$invalid }">
          <label for="field2_value">Value</label>
          <input type="text" class="form-control" name="field2_value" id="field2_value" data-ng-model="form.field2[$index].value" placeholder="Enter Value {{i+1}}" required/>
          <div ng-show="submitted && field2Form{{i}}.field2_value.$invalid" class="help-block">
            <p ng-show="field2Form{{i}}.field2_value.$error.required">Field2 value is required</p>
          </div>
        </div>
      </div>
    </ng-form>
  </div>
</div>

But in the angular controller I am getting the array of object values for field2 but field1 is not coming (missing) from the form data.

But when I hard code the question array like below for field1 then field1 also work fine

<div class="form-group">
  <div class="col-md-12">
    <ng-form name="field1Form0">
      <div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form0.field1_format.$invalid }">
        <label for="field1_format">Type</label>
        <select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[0].format" required>
          <option value="text">Text</option>
          <option value="image">Image</option>
        </select>
        <div ng-show="submitted && field1Form0.field1_format.$invalid" class="help-block">
          <p ng-show="field1Form0.field1_format.$error.required">Field1 type is required</p>
        </div>
      </div>

      <div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form0.field1_value.$invalid }">
        <div class="col-md-12">
          <label for="field1_value">Value</label>
        </div>
        <div class="col-md-12">
          <input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[0].value" placeholder="Enter field1" required/>
          <div ng-show="submitted && field1Form0.field1_value.$invalid" class="help-block">
            <p ng-show="field1Form0.field1_value.$error.required">Question value is required</p>
          </div>
        </div>

      </div>
    </ng-form>
  </div>
</div>

Can anyone help me in this?

Answers


It seems like some angular issue.

It has been fixed by declaring the variable in angular Controller like below

$scope.form = {};
$scope.form.field1 = {};

Now its working fine. May be the issue in auto declaring the nested objects or array in angular.


Need Your Help

De Serializing a list of strings without creating a new class?

c# .net xml-serialization

I have an XML configuration file with a collection of strings like so:

Cakephp 3 multiple custom template formhelpers

templates cakephp formhelper cakephp-3.0

So I'm at work (working with sensitive data might I add for posterity's sake), and the powers that be decide we need to use the all powerful and least documented new tool by Cakephp 3.0 (beta at this

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.