Add interpolation to form id/name #5736
Description
If this was implemented in the core, we'd finally be able to create the ui-input
directive we've wanted for years. It would also enable us to add validation to inputs inside ng-repeat
(currently impossible).
- Allow interpolation in
name
property:<input name="parent.child['{{grandchild}}']">
- Allow interpolation in the
id
property:<input id="parent.child['{{grandchild}}']">
What's ui-input
?
The @angular-ui team has tried tackling the complexity of form generation for a while now:
- https://github.com/angular-ui/ui-input
- New ui-input directive angular-ui/angular-ui-OLDREPO#189
- https://groups.google.com/forum/?fromgroups=#!topic/angular-ui/cQN26-5nuGU
- Initial version of the ui-input directive - RFC angular-ui/angular-ui-OLDREPO#191
- http://plnkr.co/edit/3zMsNnpNfOFwExSqLj2I?p=preview
Example:
<script type="text/ng-template" id="vert-form">
<div class="form-group" ng-class="{error:$input.error}">
<ng-switch on="$input.type">
<textarea ng-switch-when="textarea" name="{{$input.name}}"></textarea>
...
</ng-switch>
<div class="help" ng-repeat="(errorName, error) in $input.$errors" ng-switch="errorName">
<span ng-switch-when="required">The {{$input.name}} field cannot be left empty</span>
...
</div>
</div>
</script>
<form name="vert-form">
<!-- or <div ng-form="vert-form"> -->
<ui-input type="textarea" ng-model="data.item" required max-length="3" />
<!-- or <ui-input template="vert-form" ...> to override/specify on a field-by-field basis -->
</form>
Explanation
You create a powerful form-field template that handles all the different input types; generating labels, ids, names, <label for>
, formatting, assorted error messages keyed by validation rule, and so forth. Error messages are defined for an entire form or app instead of each input.
The type
property was used to select which chunk of the template you were leveraging.
The ng-model
is expanded into IDs, names, and for-properties (name-spaced by the <form>
or ng-form
).
The $input
is a scope utility to access things such as formName.inputName.$error
more easily, but also provides access to transcluded properties of the <ui-input>
and generated properties to make things easier like $input.id
or $input.name
which could of course be explicitly overwritten on the ui-input
tag.