Submit form manually in angularJS

Question

I have this angular form

  <ion-nav-buttons side="right">
    <a class="button button-icon icon ion-android-done" href="#search/search-form" ng-click="submitNewPublishMessage(msgForm.$valid, msgForm)"></a>
  </ion-nav-buttons>
  <ion-content> 
      <form name="msgForm" class="css-form" novalidate>   
        <input type="text" name="title" ng-model="msgForm.title" ng-minlength="10" ng-maxlength="150" required>
        ...
        ...

I want to manually submit form when i click a by calling submitNewPublishMessage() Inside controller both msgForm.$valid, msgForm is coming undefined.

$scope.submitNewPublishMessage = function(isValid, form)
{
  alert(isValid);
  alert(JSON.stringify(form));
}

JB Nizet · Accepted Answer · 2015-09-19 08:53:06Z

1

I don't know about ionic, but my guess is that the ionContent directive has its own scope, and that the form is thus created in this inner scope, rather than the scope of the controller.

As always, the trick is to avoid storing things directly in the scope, but rather to store them as attributes of an object of the scope.

So, in the controller, add the following line of code:

$scope.forms = {
};

$scope.model = {
};

And in the view, use

<ion-nav-buttons side="right">
  <a class="button button-icon icon ion-android-done" href="" ng-click="submitNewPublishMessage(forms.msgForm)"></a>
</ion-nav-buttons>
<ion-content> 
  <form name="forms.msgForm" class="css-form" novalidate>   
    <input type="text" name="title" ng-model="model.title" ng-minlength="10" ng-maxlength="150" required>

Note that the above

doesn't pass the msgForm.$valid flag in addition to the msgForm, since it is redundant
doesn't store the model of the form (i.e. the values entered in the form fields) in the NgFormController itself. Doing so would cause a conflict between the input widget and the input model.

I would really, really avoid using links to submit forms, if I were you. Links are meant for navigation, not for form submissions. Use a button.

answered Sep 19, 2015 at 8:53

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

2 Comments

Manish Kumar Over a year ago

inside submitNewPublishMessage how will i get the form fields value here i am getting error like

{"$$parentForm":{},"$error":{"minlength":[{"$viewValue":"hdjdjfgg","$$rawModelValue":"hdjdjfgg","$validators":{},"$asyncValidator

JB Nizet Over a year ago

The form field values are in $scope.model.

Kashif Mustafa · Accepted Answer · 2015-09-19 08:50:06Z

0

Put ng-click event inside form like

    <form name="msgForm" class="css-form" novalidate>
         <ion-nav-buttons side="right">
        <a class="button button-icon icon ion-android-done" href="#search/search-form" ng-click="submitNewPublishMessage(msgForm.$valid, msgForm)"></a>
      </ion-nav-buttons>
      <ion-content> 

            <input type="text" name="title" ng-model="msgForm.title" ng-minlength="10" ng-maxlength="150" required>
            ...
            ...
</form>

answered Sep 19, 2015 at 8:50

Kashif Mustafa

1,1826 silver badges20 bronze badges

Collectives™ on Stack Overflow

Submit form manually in angularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related