当未填写必填字段时，不调用角提交

Question

I'm creating a form in Angular with Ionic. I don't want a red error class to be displayed unless a user has submitted the form. As such, my code looks like this:

<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>

And then in my controllers

$scope.submit = function ()
{
   $scope.formSubmitted = true; //Tell our errors they can show now
}

So the error class should only show up when formSubmitted is true. For whatever reason, however, required prevents submit from being called. This isn't the case for other attributes such as minlength.

How can I get the behavior I want?

Answer 1

You need to add novalidate to your form.

The reason being, your browser is validating your form rather than letting your code do it.

alternatively, do something like:

<form ng-submit="submit()" name="form" novalidate>
     <ion-radio ng-repeat="item in items" ng-model="data.type" name="type" ng-value="item.value" ng-class="{'error' : form.type.$invalid && form.$submitted }"
</form>

form.$submitted will become true when you submit.