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

Add interpolation to form id/name #5736

Closed
@ProLoser

Description

@ProLoser

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:

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions