My directive includes a template with an ng-form:
<ng-form name="autocompleteForm">
<div class="form-group" show-errors>
<input type="text" class="form-control" ng-model="ctrl.val.value" name="autocompleteField" required>
<div class="messages" ng-messages="autocompleteForm.autocompleteField.$error">
<span class="help-block" ng-message="required">Please, select the value</span>
</div>
</div>
</ng-form>
I am dynamically adding this form using ng-repeat. Everything seems to be working fine - the form itself and the validation. However, there is one issue: after the form is added, it appears to be $invalid and displays an error message. I'm unsure why this is happening and how to resolve it. Here is the object of the form after it is added:
{
"$error":{
"required":[
{
"$validators":{
},
"$asyncValidators":{
},
"$parsers":[
],
"$formatters":[
null
],
"$viewChangeListeners":[
],
"$untouched":true,
"$touched":false,
"$pristine":true,
"$dirty":false,
"$valid":false,
"$invalid":true,
"$error":{
"required":true
},
"$name":"autocompleteField",
"$options":null
}
]
},
"$name":"autocompleteForm",
"$dirty":false,
"$pristine":true,
"$valid":false,
"$invalid":true,
"$submitted":false,
"autocompleteField":{
"$validators":{
},
"$asyncValidators":{
},
"$parsers":[
],
"$formatters":[
null
],
"$viewChangeListeners":[
],
"$untouched":true,
"$touched":false,
"$pristine":true,
"$dirty":false,
"$valid":false,
"$invalid":true,
"$error":{
"required":true
},
"$name":"autocompleteField",
"$options":null
}
}
Some online sources discuss this behavior in relation to dynamically added forms (like this one) and they seem to experience the same issue. Is this the default behavior in Angular? Are there any options to prevent this "initial validation"?