Angularjs computed form field validation

Question

We have a table generated from a generic structure with filtering allowed on the columns. The structure can include a regex value for ensuring the user enters only valid filtering values. We want to apply the regex in the normal ng-pattern way with a validation message ... something like this

<table class="table header">
    <thead ng-form="columnFiltersForm">
        <tr>
            <th class="col-{{$index}}"
                ng-repeat="column in columns track by column.Name">
                <div>
                    <span>{{column.DisplayName}}</span>
                </div>

                <input type="text" class="filter form-control"
                       name="col-{{$index}}" ng-model="column.filterVal"
                       placeholder="Search" ng-pattern="column.FilterRegex" />
                <div ng-messages="columnFiltersForm.col-{{$index}}.$error"
                     class="validation" role="alert">
                    <span ng-message="pattern">
                      Invalid character for {{column.DisplayName}}
                    </span>
                </div>
            </th>
        </tr>
    </thead>
</table>

However, the ng-messages value of columnFiltersForm.col-{{$index}}.$error doesn't work. Any idea if something like this is possible, and how to achieve it?

score 0 · Accepted Answer · answered Feb 18 '20 at 02:35

The ng-messages directive takes an AngularJS expression:

<input type="text" class="filter form-control"
       name="col-{{$index}}" ng-model="column.filterVal"
       placeholder="Search" ng-pattern="column.FilterRegex" />
̶<̶d̶i̶v̶ ̶n̶g̶-̶m̶e̶s̶s̶a̶g̶e̶s̶=̶"̶c̶o̶l̶u̶m̶n̶F̶i̶l̶t̶e̶r̶s̶F̶o̶r̶m̶.̶c̶o̶l̶-̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶.̶$̶e̶r̶r̶o̶r̶"̶
<div ng-messages="columnFiltersForm['col-' + $index].$error"
     class="validation" role="alert">
    <span ng-message="pattern">
      Invalid character for {{column.DisplayName}}
    </span>
</div>

For more information, see

Why mixing interpolation and expressions is bad practice

Angularjs computed form field validation

1 Answers1