CODEWITHSUNDEEP
javascripthtmlangularjsforms
ArunBabuVijayanath
ArunBabuVijayanath

Reputation: 500

Submit an ng-form if focus is not in the textarea

 <ng-form name="ctrl.scaleItemForm" ng-submit="ctrl.submit()">
      <input type="text"
      ng-model="ctrl.scaleItemPF.tareValue"
      name="tare-val-si">

      <textarea name="sectionLayouts"
      ng-trim="false"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
      spellcheck="false">
      </textarea>

      <button type="submit"
      class="button-save">
      Save
      </button>           
 </ng-form>

I am using Angular 1.5.8, In my view, I have a ng-form with ng-submit attached to it so as to trigger submit function on entering key press. I have a textarea inside the ng-form, default behavior when pressing an enter key inside a textarea is a newline, which is happening alongside the submit of the form and I don't want to submit the form if the focus is on texture, instead I need a new line. If replaced with form tag instead of ng-form its working as expected. Is this a bug associated with ng-form or am I doing something wrong

To wrap the question. Don't want to submit the form on entering key press if the focus is on textarea, otherwise, the form should be submitted.

Upvotes: 2

Views: 426

Answers (2)

ArunBabuVijayanath
ArunBabuVijayanath

Reputation: 500

if (event && event.target.nodeName === 'TEXTAREA'
          && event.keyCode === 13) {
            return undefined;
}

Fixed the issue by passing $event to the submit function and checking to see if current input is a textarea and enter key has triggered the submit function returned 'undefined' so as to continue with default behavior of textarea to move cursor to next line.

Upvotes: 2

Jins Peter
Jins Peter

Reputation: 2469

Yes, This is an issue with ng-forms and ng-sumbit.

They are not built to work together. ng-submit is a directive that triggers the submit event of a form tag. But ng-form is not an HTML5 form its an instance of angular FormController. This means ng-form with ng-submit does not trigger submit as ng-form does not create an HTML5 form tag. you can see that if you check the HTML in your Application. So, to round up, you need to use instead of directive.

Upvotes: 0

Related Questions