I am currently working on building a form using Angular and Ionic. I want to ensure that the red error class is only displayed after the user has submitted the form. To achieve this, my code is structured as follows:
<form ng-submit="submit()" name="form">
<ion-radio ng-repeat="item in items" ng-model="data.type" name="type" ng-value="item.value" ng-class="{'error' : form.type.$invalid && formSubmitted }"
</form>
Then, in my controllers:
$scope.submit = function ()
{
$scope.formSubmitted = true; //Letting errors know they can now be displayed
}
Therefore, the error class will only appear when formSubmitted is set to true. However, it seems that the presence of the required attribute prevents the submit function from being called unlike other attributes like minlength.
How can I achieve the desired functionality?