Saturday, August 10, 2013

How to prevent form validation error when DOM is changed?

How to prevent form validation error when DOM is changed?

I have a form within a Twitter Bootstrap dialog (AngluarJS Directive) but,
am having trouble keeping a reference to the form when the modal closes.
We are using the technique shown here to simplify validation.
Markup:
<div ng-controller="ModalDemoCtrl">
<div modal="shouldBeOpen" close="close()" options="opts">
<div class="modal-header">
<h3>Form</h3>
</div>
<div class="modal-body">
<form name="myForm">
<div class="control-group" ng-class="{error: IsValid('name') }">
<label>Name:</label>
<input type="text" name="name" ng-model="user.name"
required/>
<span ng-show="IsInvalid('name')"
class="help-inline">Name is required</span>
...
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" ng-save()">Save</button>
</div>
</div>
</div>
Controller:
app.controller( 'ModelDemoCtrl', function( $scope ) {
$scope.isInvalid = function(field){
return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
};
...
});
The error thrown states that $scope.myForm[field] is undefined. I
understand when the modal closes the markup is removed from the DOM but,
how would I prevent the error?
I have tried the following without success:
if( typeof $scope.myForm == 'undefined' )
// validation here

No comments:

Post a Comment