Question

I have a form, generated through rails helpers, that has some AngularJS on it.

 = form_for some_models do |f|
      %fieldset.form-horizontal
          %div.some-class
     #And so on and so forth
      =f.submit

And so on.
Within this form, I have various angular directives and controllers nesting within each other. One of the directives is listening on a field and comparing its value to do some custom angular validation like so:

    ctrl.$setValidity("decisionRuleCodeActivated", scope.valid).

This sets ng-invalid/ng-valid on the form and the relevant fields correctly, however the forms submission can still occur with no problems.

While I understand that the “correct” way to block this behaviour is to introduce an ngSubmit, which does the validation, and then reaches out to an Angular Service which serializes to JSON and Posts to the relevant endpoint, this would require rewriting a truly obscene amount of code.

Thus my question:

How can I prevent the form from submitting, without doing so?

Thanks!

Answer 1

My solution:

  if scope.valid is true
    angular.element("form.ng-valid").find("input:submit").click(->
      true
    )
  else
    angular.element("form.ng-invalid.ng-dirty").find("input:submit").click(->
      false
    )

The code above in a method triggered by the a watch, just after the $setValidity in a directive