I am encountering an issue with validating my model in a subform using AngularJS. Despite making changes to the SearchPostCode values and seeing updates in classes, the error message fails to display, and the button remains disabled.
<form novalidate>
... Some other form fields
<ng-form name="SearchPostcodeForm">
<div class="partial-search-postcode-service form-horizontal">
<div class="form-group">
<label
class="control-label col-md-2"
for="CustomerAddressDetails_CurrentAddress_SearchPostcode">
Post code
</label>
<div class="col-sm-6 col-xs-10">
<input
id="CustomerAddressDetails_CurrentAddress_SearchPostcode"
name="CustomerAddressDetails.CurrentAddress.SearchPostcode"
ng-model="CustomerAddress.CurrentAddress.SearchPostcode"
required="required" type="text" >
<small ng-show="SearchPostcodeForm.CustomerAddress_CurrentAddress_SearchPostcode.$error.required">
Your postcode is required.
</small>
</div>
</div>
<input type="submit" value="Find your address"
name="action:Current_SearchPostcode"
data-val-valgroup-name="SearchPostcode"
class="btn btn-primary causesvalidation"
ng-click="seachPostcode($event, 'Current');"
ng-disabled="SearchPostcodeForm.$invalid"
disabled="disabled">
</div>
</ng-form>
... Some other form fields
</form>
It seems that the validation process is working as indicated by changes in classes, but the error message doesn't appear and the button stays disabled.
Could the issue be related to the lengthy names for the form field or perhaps the use of ids with separators causing complications?