Independent sub FormController via not-required attribute

[slobo]

This PR implements ability to prevent FormController from linking to parentForm if not-required attr is defined on the [ng-]form element.

It is useful for scenario like below, where aux subform can be independently validated without invalidating parent form. Without this patch (and not-required on the subforms), master "Save" button is disabled when aux input fields are not filled out. Idea is to use them only temporarily before adding to master model and then clears them out.

Alternatively, if subform inputs are not marked as required, then subform "Add" buttons will always be enabled. Options are either user or programmer un-friendly.

(The only workaround I found is to use ng-if on the subform to add it to DOM only when requested, but often we need subforms visible all the time, and we can't place them elsewhere in the DOM.)

<ngForm name="parent" ng-submit='saveModel(model)'>
  <button ng-disabled='parent.$valid'>Save</button>

  <!-- Colours -->
  Selected colours:
  <ul>
    <li ng-repeat="colour in model.colours">{{colour.name}}</li>
  </ul>

  <!-- colour selector subform -->
  <ngForm name="aux" not-required>
    <input type='text' ng-pattern='colour' required ng-model='newColour' />
    <button ng-disabled='aux.$valid' ng-click='addColour(colours, newColour); newColour=null'>Add</button>
  </ngForm>


  <!-- Fabrics -->
  Selected fabrics:
  <ul>
    <li ng-repeat="fabric in model.fabrics">{{fabric.name}}</li>
  </ul>

  <!-- fabric selector subform -->
  <ngForm name="aux" not-required>
    <select ng-options='opt in fabricOptions' required ng-model='newFabric'>
      <option value=''></option>
    </select>
    <button ng-disabled='aux.$valid' ng-click='addFabric(fabrics, newFabric); newFabric=null'>Add</button>
  </ngForm>
...

[slobo]

Do let me know if there is anything I can do to speed up inclusion of this or similar feature into mainline, I'd love to dispense with the fork. Thanks

[psi-4ward]

Exactly what i need, my patch is the same:

function FormController(element, attrs) {:~L.15332

parentForm = typeof attrs.dontBubble == 'undefined' && element.parent().controller('form') || nullFormCtrl,

[plentz]

related #5858

[Narretz]

The new behavior needs a test. There's also the issue that the child form's submit event will bubble up the DOM to the parent form, which is undesired.

[slobo]

I'm not in ng-world currently so won't be doing anything about it for foreseeable future. Recommend other interested parties reopen / make a new ticket. Thanks

[ruifortes]

👍

[rodrigopedra]

+1