McNull / angular-form-gen

Design Bootstrap based form schemas for AngularJS in a drag and drop WYSIWYG environment.
MIT License
135 stars 81 forks source link

Would it be possible to create composite inputs? #9

Open JoeGrasso opened 9 years ago

JoeGrasso commented 9 years ago

How could I go about creating a "quick input", for example "FullName", that if the user dragged it over there would be two text boxes, one for first and last name?

McNull commented 9 years ago

You can register custom field templates. I haven't documented this yet, but something like this should do the trick:

app.config(function (fgConfigProvider, FgField) {

  var category = 'Text input fields';
  var fieldTemplate = new FgField('appDateInput', {
    displayName: 'Date',
  });

  var templateUrl = 'app/common/date-input/fg-field-date-input.ng.html';
  var propertiesUrl = 'app/common/date-input/fg-properties-date-input.ng.html';

  fgConfigProvider.fields.add(fieldTemplate, category, templateUrl, propertiesUrl);

  fgConfigProvider.validation.message({
    date: 'Invalid date',
    dateMin: 'Date value too low',
    dateMax: 'Date value too high'
  });

});

Each field requires two templates:

  1. Default: Used when the field is rendered in the form
  2. Properties: Used when the properties are displayed in the editor.

Have a look at the default templates for examples.

markeaston commented 7 years ago

You answer does not demonstrate how to have a field template with two fields in it. ie First Name and Last Name. Would be helpful if you could elaborate, please. As much as I can see your answer is referring to what we do normally when adding a single custom field, and so you have not answered the question about "composite fields" . Apologies if I have missed the point of your comment. :)

markeaston commented 7 years ago

I did manage to work out how to do it. I ended up wit a field template with two fields in it so that they were combined in the form designer. But then we needed another separate field in the schema - so I manually inserted that on server side. But then I needed a field in Formgen to support this inserted field so I create a second field template for the second field which was empty - so it did not render anything to the field.