Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Independent sub FormController via not-required attribute - #5037

Closed
slobo wants to merge 1 commit into
angular:masterfrom
slobo:patch-1
Closed

slobo wants to merge 1 commit into
angular:masterfrom
slobo:patch-1

Conversation

@slobo

@slobo slobo commented Nov 19, 2013

Copy link
Copy Markdown

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>
...

do not link to parent form if `not-required` attr is defined on the (ng)form element
@slobo

slobo commented Nov 21, 2013

Copy link
Copy Markdown
Author

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

Copy link
Copy Markdown

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 plentz mentioned this pull request May 28, 2014
@plentz

plentz commented May 28, 2014

Copy link
Copy Markdown
Contributor

related #5858

@Narretz

Narretz commented Jul 11, 2014

Copy link
Copy Markdown
Contributor

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

slobo commented Aug 19, 2014

Copy link
Copy Markdown
Author

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

@slobo slobo closed this Aug 19, 2014
@ruifortes

Copy link
Copy Markdown

👍

1 similar comment
@rodrigopedra

Copy link
Copy Markdown

+1

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants