arrayform

Idea

One important scenario not covered yet is how to handle validations on array.

We have the following aspects to take into account:

• A field form id for a tabular / array like scenario use to have the following pattern fieldName_99 (99 ID).
• Any entry of the array should hay a unique primary key (single field based).
• Validations are defined per row / cell ?
• Field Id's should be unique, if we are using them inside a e.g. table we have to add a suffix to ensure uniqueness per filed.
• In some other cases we can dinamically go creating fields and having some temp Id's, but they should be unique -->> issue here map key to fieldId could change (app has to take control over removing / adding validations)

Design considerations

At lib level we will assume that:

• The application will take care of generating unique Id's for the array form fields.
• The application will take care of adding / removing fieldID's -> {vm.ArrayField, vm.FieldKey}
• The application rules to create unique Id's is something transparent to the lib, we won't make any assumption.
• The lib will just hold a mapping given a unique fieldId to a vm array field, and a given key field.
• Vm array ->record key field will be just a single field.

Implementation

Methods impacted from the validation engine

#!typescript

export interface IValidationEngine {

    initializeStaticFieldVmMappings(idsFieldVmMapping : Array<KeyValue>) : void;

    // Pending add mappings and remove mappings 
    // <new>
   AddDynamicFieldVmMapping(formFieldId, vmArrayFieldName, keyFieldName); 
   RemoveDynamicFieldMapping(formFieldId);
   CleanDynamicVmMappings();
    // </new>
}

Note: AddFieldVmMapping should store like a cache of dynamic keys.

Usage proposal (pseudocode, we should create a component)

#!typescript

map (vm.myClientArray) --> item
           <Input
               name="fullName_ +{item.uniqueKey}"
         label="name"
                value={item.fullname}
                onChange={this.updateMemberFromUI.bind(this)}
                error={(!this.props.errors[fullName_ +{item.uniqueKey} ]) ? '' : this.props.errors[fullName_ +{item.uniqueKey} ].firstOrDefaultError} />

By using this approach, we can just reuse all the existing plumbing / infraestructure.

BUT where do we initialize this array mapping?

• Detect when the data is loaded fire Action Array Validation creation
• Detect Add / Remove to add / remove validations
• Do not forget to wipe mappings once we exit from the screen or a new load is performed ! -- I would just remove array entry mappings --> On the unmount we will just use CleanDynamicCreatedVmMappings();

Sample forms A) complex case, B) simpler one

A)

B)

Proposal for Case A)

Proposal for Case B)