Validate text-input(pattern) when doing new selection in dropdown
Iam writing an AngularJS app and in this app I have a domain-management
tool. When a domain is selected I generate the domain-records in a table
letting the user edit each row. Since the fields are dynamicly created I
use to enable me to validate each single row individualy since they share
the same name.
To the point.. Each domain-record has a content field where the IP or
CNAME etc resides. I validate this field using the pattern directive that
is feeded by a functin that generates a regex depending on what "type( A,
CNAME, TXT etc.. )" is selected.
The problem is that when I edit, lets say an A record and then change the
record-type to CNAME the form still appears valid since no new validation
of the content-field have been done. Only way for me ro re-validate is to
start typing in the content field which works fine.
Check images bellow..
I press edit on the A record and everything looks fine
I change the record type to CNAME and the form still appears valid even
though the regex changed. When I change the type I want the
content(1.2.3.4) to be re-validated since its a new regex in place.
I start typing in the content field and now the form becomes invalid. I
want this to happen when I change type record-type, not only when I start
typing again
#Slim version of the template to give you an idea on whats going on
<form novalidate name="recordForm" class="css-form"
ng-controller="EditRecordCtrl">
<table>
<tr ng-repeat="record in domain.data.0" class="gradeA">
<td ng-init="startingTypeData = record.type"
class="domains-td" ng-switch on="record.edit">
<span ng-switch-default>{{record.type}}</span>
<span ng-switch-when="true">
<select
ng-change="domainRecordContentType(record.type)"
ng-init="domainRecordContentType(record.type)"
ng-model="record.type" ng-options="c for c in
domainRecordTypes" class="span12">
</select>
</span>
</td>
<td ng-init="startingContentData = record.content"
class="domains-td validation-dropdown-error-parent" ng-switch
on="record.edit">
<span ng-switch-default>{{record.content}}</span>
<span ng-switch-when="true">
<ng-form name="innercContentForm">
<span class="validation-dropdown-error"
ng-show="innercContentForm.content.$error.pattern">
{{
'RECORD_EDIT_FORM_RECORD_CONTENT_PATTERN_MSG'
| translate }} ( {{ record.type }} )
</span>
<input type="text" ng-model="record.content"
name="content" required class="span12
edit-record-input"
ng-pattern="domainRecordContentRegex.0" required
/>
</ng-form>
</span>
</td>
</tr>
</table>
</form>
So the question is.. how can I re-validate the content field when I change
the type-dropdown-field?
No comments:
Post a Comment