Why doesn't ngSubmit function inside a modal?

I am experiencing an issue where my submit button is not activating the ng-click angular directive, and I cannot seem to identify the cause. Most people who faced a similar problem did not have their submit button placed inside their form, but I am confident that I have done so in my case.

<div class="modal fade" id="subModal" ng-controller="SubscriberController" ng-controller-as="subCtrl">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times; </span><span class="sr-only">Close</span></button>
                <h2 class="modal-title">Subscribe</h2>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="well">
                            <form ng-submit="console.log('submit')">
                                <div class="form-group">
                                    <label for="subscriber-name" class="control-label"><strong>Name:</strong></label>
                                    <input type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
                                </div>
                                <div class="form-group">
                                    <label for="subscriber-email" class="control-label"><strong>Email:</strong></label>
                                    <input type="email" class="form-control" ng-model="subCtrl.subData.email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef4f1f6f0faf1fbdefbe6fff3eef2fbb0fdf1f3">[email protected]</a>" required>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success btn-lg btn-block"><i class='fa fa-envelope'></i> Subscribe</button>
                                </div>
                                <div re-captcha ng-model="subCtrl.subData.captcha"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №1

If you want to include specific input elements in your form, consider adding the following code snippets:

<input ng-model="myForm.email" type="email" class="form-control" id="subCtrl.subData.email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea4a1a6a0aaa1ab8eabb6afa3bea2abe0ada1a3">[email protected]</a>" required> 

and

<input ng-model="myForm.name" type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required> 

Make sure to assign a name attribute to your form as shown below:

<form name="myForm" ng-submit="submit()">

For further reference, check out this plnkr example: http://plnkr.co/edit/KRmZkPS6t4ANmAHwTevQ

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate through the overlay's content by scrolling

Objective: Looking to implement a scroll feature for long content. Issue: Not sure how to create a scroll that allows users to navigate through lengthy content. Thank you! function openNav() { document.getElementById("myNav").style.height = "1 ...

Toggling with Jquery when an image is clicked

I'm trying to wrap my head around the functionality of jquery toggle. My goal is to toggle to the next anchor element with the class plr-anchor when an image with the class go_down is clicked. The information is being populated using maps. Javascript ...

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

Direct your attention solely on the input fields and buttons

Is it possible to restrict focus to specific elements, such as input fields and buttons? For example, if a user is focused on an input field and then clicks somewhere else on the page, the input field should retain focus. But if the user clicks on another ...

How can we rearrange the positions of three items in an array?

I am dealing with a function that returns an array of objects structured like this const allGreen = _.filter( sidebarLinks, side => !isServicePage(side.slug.current) ); https://i.stack.imgur.com/dR8FL.png I am attempting to rearrange the positions of ...

I found myself puzzled by the error message "Module protobufjs not found."

I am currently utilizing the node library known as node-dota2. I have completed all the necessary steps required by node-dota2, as outlined on this site: https://github.com/Arcana/node-dota2#installation-and-setup 1. Installed it using npm 2. Created a fil ...

Instructions on how to showcase a standard text within a designated text container

I am currently facing an issue with a textarea or textbox that is dynamically receiving URLs from a database. The textbox is displaying the full URL address, which is not visually appealing. I would like to replace this with some generic text such as "cl ...

Displaying an array's values in an ng-repeat using a JSON object output

I have received JSON output from an API and I want to display it using ng-repeat within a div. [ { "companyName": "abc", "namesList": [ { "name": "Jaakr1", "email": "& ...

Issue encountered while attempting to parse JSON data

I've been dealing with JSON data in Django view and parsing it in JavaScript to extract the necessary information. This is a snippet from my view.py file (Django) ibms = [] for i in range(2, 5): ibm = Mapa(i, wsMapa) ibms.append(ibm.__dict__) ...

bespoke validation using AngularJS

Consider a scenario where there is a table comprising of 10 rows and each row contains 10 columns of checkboxes. Prior to the user submitting the form, it is necessary to implement a validation rule: at least two checkboxes must be checked in each row! & ...

The intricate field name of a TypeScript class

I have a TypeScript class that looks like this - export class News { title: string; snapshot: string; headerImage: string; } In my Angular service, I have a method that retrieves a list of news in the following way - private searchNews(sor ...

The most efficient way to invoke a jws void method in the fewest steps possible

When calling a void method of a SOAP JWS web-service using JavaScript without expecting a result back, what is the most efficient and concise approach? ...

The functionality of the date picker is hindered when a dropdown with multiple selections is activated, and conversely, the multi-selection feature of

I am working on an application where I need to implement a drop-down with multi-selection functionality, as well as a date picker for text boxes. For the drop-down with multi-selection feature, I referred to the code in the following link: . Additionally, ...

Converting UTF-16 to UTF-8 in JavaScript: A step-by-step guide

I'm facing a challenge with Base64 encoded data in UTF-16 format. While most libraries only support UTF-8, I need to find a way to decode the data by dropping the null bytes, although I'm not sure how to go about it. Currently, I'm utilizin ...

Below and above the number 10

Struggling with a challenging coding problem, I am completely stumped on how to make it work. function(obj) { if ( (obj < 10) && (obj > 10) ) { return true; } } I've attempted various solutions such as manipulating the varia ...

Vue is refusing to display information for a certain API call

Within my next component, I have the following structure: <template> <div class="home"> <div class="container" v-if="data" > <Card v-for="result in data" :img="result.links[0]&q ...

Each time, vue-router instantiate a fresh Component instance

I have encountered a frustrating issue with vue-router that keeps bothering me. Every time I navigate between routes, a new instance of the component is created and the old instances remain active in the background! My expectation was that when I switch t ...

What is the best way to reduce the size of a Base64/Binary image in Angular6

I utilized the Ngx-Webcam tool to capture images from my camera. My goal is to obtain both high quality and low quality images from the camera. Although this library provides me with Base64 images, it offers an option to reduce the size using imageQuality ...

Adding optional properties to TypeScript interfaces

As discussed in this post, the optional ? operator is commonly used to indicate that a function parameter can be omitted. But what is the significance of the ? operator when it appears on interface parameters? For instance, consider the following TypeScrip ...

Ways to retrieve text from an input field using Protractor

Looking through the protractor documentation, I came across an interesting example: describe('by model', function() { it('should find an element by text input model', function() { var username = element(by.model('username&ap ...