Data driven forms

Goals:

• To be able to generate a form dynamical based on specified structure.
• It should allow for marshaling data from/to form and model.
• Should support layout strategies
• Should support selecting of right component type

Things to consider:

• Impedance mismatch of model vs form control

Implementation note:

• We need to develop a component which will look through this and generate a dynamic component for each type and load the private component based on type.

import {forms, required, materialDesign} from 'angular2/forms';

// Our model
class Address {
  street: string;
  city: string;
  state: string;
  zip: string;
  residential: boolean;
} 

@Component({
  selector: 'form-example'
})
@Template({
  // Form layout is automatic from the structure
  inline: `<form [form-structure]=”form”></form>`
  directives: [forms]
})
class FormExample {
  constructor(fb: FormBuilder) {
    this.address = new Address();

    // defining a form structure and initializing it using 
    // the passed in model
    this.form = fb.fromModel(address, [
      // describe the model field, labels and error handling
      {field: 'street', label: 'Street', validator: required},
      [ {field: 'city', label: 'City', validator: required},
        {field: 'state', label: 'State', size: 2, validator: required},
        {field: 'zip', label: 'Zip', size: 5, validator: zipCodeValidator},
      ],
      {field: 'isResidential', type: 'checkbox',label: 'Is residential'}
    }, {
      // update the model every time an input changes
      saveOnUpdate: true,
      // Allow setting different layout strategies
      layoutStrategy: materialDesign
    });
  }
}

function zipCodeValidator(control) {
  if (! control.value.match(/\d\d\d\d\d(-\d\d\d\d)?/)){
    return {invalidZipCode: true};
  }
} 

[mohsen1]

One very common use case for data-driven forms is generating forms based on a JSON Schema. Backend and API developers love to give front-end developers a JSON Schema and tell them this is what the model should look like when you’re submitting a from. It makes a lot of sense to use that same schema to build the form. Please take a look at json-editor. It does a great job at generating forms off a JSON Schema.

Main challenges in generating forms from a JSON Schema are:

• JSON Schema has validation rules like minimum, format and so on. Forms that are generated from a JSON Schema should have that validation logic in there.
• JSON Schema supports arrays. Forms should support mechanism for adding new items to array. Removing items and sorting items in array are required too. Items of array themselves can be complex schemas.
• JSON Schema can have additionalProperties: true property which means the model can have unlimited number of key/value pairs.
• JSON Schema is recursive and base case is {} which means any object. Other base cases are {type: 'string'} or {type: 'array'}.
• JSON Schema supports anyOf, oneOf and allOf. Learn more about them here. This makes JSON Schema very powerful and at the same time very hard to generate forms and validators.

I would love to see Angular 2 Forms module supports JSON Schema out of the box, but if that’s not aligned with project goals please consider making it easy for developers to build forms from JSON Schema.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}