form validation from another controller in angularjs

Question

I have 2 controllers: btnController and formController. I am trying to submit a Form from another controller action. The problem is that the function in the controller should only be called when the Form Validation is Valid. Right now, if the user tries to submit the form without writing anything, the submit function is called.

How can i fix it?

My code

<div ng-app='app'>
    <div class='header' ng-controller='btnController'>
        <button ng-click='submit()'>
            Submit Form
        </button>
    </div>

    <div class='container' ng-controller='formController'>
        <h2>Form</h2>
        <form id='myform'>
            <input ng-model='name' placeholder='name' required/>
            <span style="color:red" ng-show="myform.name.$dirty &&      myForm.name.$invalid">
                <span ng-show="myform.name.$error.required">Username is required.</span>
            </span>
        </form>
    </div>
</div>


(function(){
    var app=angular.module('app',[]);
    app.controller('btnController',function($scope){
        $scope.submit=function(){
            angular.element(document.getElementById('myform')).scope().submit();
        }
    });

    app.controller('formController',function($scope){
        scope.name;
        $scope.submit=function(){
            alert($scope.name);
        }
    });
})();

Here is the example JsFiddle

Cláudio Alves · Accepted Answer · 2016-04-21 14:58:06Z

2

Edit:

The submit() function in your 'formController' will only be called when the form is valid:

app.controller('btnController',function($scope){
    $scope.submit=function(){
      var elementScope = angular.element(document.getElementById('myform')).scope();
      if(elementScope.myform.name.$valid)
         elementScope.submit();
    }
});

New Jsfiddle: https://jsfiddle.net/oucdodf8/

edited Apr 21, 2016 at 14:58

answered Apr 21, 2016 at 9:44

Cláudio Alves

7653 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ajith Over a year ago

that is not my problem. please look at the jsfiddle example

Ajith Over a year ago

the submit call was from another controller and not in the form also.

Cláudio Alves Over a year ago

So you want that the submit() function in your formController will ONLY be called when the form is valid, right?

Ajith Over a year ago

Ya right. and also i want to show the validation error

Ajith Over a year ago

ya i see that, but it doesn't show the required validation error. thank you

|

Collectives™ on Stack Overflow

form validation from another controller in angularjs

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related