forms-angular icon indicating copy to clipboard operation
forms-angular copied to clipboard

Deep nesting

Open spallesen opened this issue 10 years ago • 1 comments

Hi there,

I desperately need deep nesting to work in a project im baseing to a large part on forms-angular. The issue is the data is not saved on level 3 and deeper. I need at least 3 levels.

To illustrate the scenario, think of your professional resume/CV you have 3 levels:

  1. level: Basic data on your self (name, email, phone etc.)
  2. level: Jobs you have had previosly (for example: worked for IBM from June 2010 to August 2012 as a proejct manager)
  3. level: Projects I was invoved with during me time at IBM (for example: Global Lean Project from June 2010 to January 2011 and SCRUM Train the Trainer from February 2011 to August 2012)

A simple model to illustrate:

'use strict';

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var projectSchema = new Schema({
  projectName: {type: String},
  dateFrom: {type: Date},
  dateTo: {type: Date},
  projectDescription: {type: String, form: {type: 'textarea', rows: 'auto'}}
});

var jobSchema = new Schema({
  company: {type: String},
  title: {type: String},
  dateFrom: {type: Date},
  dateTo: {type: Date},
  jobDescription: {type: String, form: {type: 'textarea', rows: 'auto'}},
  projects: {type: [projectSchema]}  
});

var resumeSchema = new Schema({
  surname: {type:String},
  forename: {type:String},
  workHistory: {type: [jobSchema]},

});


var Nesting;
var modelName = 'Nesting';

try {
  Nesting = mongoose.model(modelName);
} catch(e) {
  Nesting = mongoose.model(modelName, resumeSchema);
}

module.exports = Nesting;

spallesen avatar Apr 10 '15 13:04 spallesen

Hi

I understand the issue, and am to an extent working around my need for it. I did spend a couple of hours on it a few days ago in response to a request from someone on gitter, but ended up removing the broken support there was.

I am away on holiday at the moment and my time is not my own, but this is an issue I need to address at some point, either by improving the form generation within forms-angular or porting in form generation from elsewhere (but all options have their limitations, from what I can see).

If you need an immediate response and all you need is form generation then one option might be to use angular-schema-forms. Nesting seems to work well (though it generates lots of watches). I just had a little play with an example and it seems to work as you would expect:

Form:

[
  {
    "type": "help",
    "helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>"
  },
  {
    "key": "comments",
    "add": "New Comment",
    "style": {
      "add": "btn-success"
    },
    "items": [
      "comments[].name",
      "comments[].email",
      {
        "key": "comments[].spam",
        "type": "checkbox",
        "title": "Yes I want spam.",
        "condition": "model.comments[arrayIndex].email"
      },
      {
        "key": "comments[].comment",
        "type": "textarea"
      },
      {
          "key":"comments[].replies",
          "type":"array",
            "add": "New Reply",
            "style": {
              "add": "btn-warn"
            },          
          "items":[
            "comments[].replies[].name",
            "comments[].replies[].text"
           ]
      }

    ]
  },
  {
    "type": "submit",
    "style": "btn-info",
    "title": "OK"
  }
]

Schema

{
  "type": "object",
  "title": "Comment",
  "required": [
    "comments"
  ],
  "properties": {
    "comments": {
      "type": "array",
      "maxItems": 2,
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "title": "Name",
            "type": "string"
          },
          "email": {
            "title": "Email",
            "type": "string",
            "pattern": "^\\S+@\\S+$",
            "description": "Email will be used for evil."
          },
          "spam": {
            "title": "Spam",
            "type": "boolean",
            "default": true
          },
          "comment": {
            "title": "Comment",
            "type": "string",
            "maxLength": 20,
            "validationMessage": "Don't be greedy!"
          },
          "replies": {
              "type": "array",
              "items": {
                  "type":"object",
                  "properties" : {
                      "name": {
                          "title":"name",
                          "type":"string"
                      },
                      "text": {
                          "title":"replyText",
                          "type":"string"
                      }
                  }
              }
            }
        },
        "required": [
          "name",
          "comment"
        ]
      }
    }
  }
}

If you have more time then I may be able to help within forms-angular. Would you be interested in helping?

Mark

mchapman avatar Apr 10 '15 21:04 mchapman