Ways to set up Angular validation for multiple buttons

Could you please review my work on Plunker? Here's the link: http://plnkr.co/edit/Jb43KPTXwF6zISS8PkaF?p=preview

In my project, I have two buttons - save and modify. Currently, when I click the save button (type submit), the form validates before calling the function. Now I want to add the same validation functionality to the modify button (type button) so that it also validates before calling the modify function.

If you have any alternative solutions, feel free to share them as well. Just keep in mind that I need the validation to work with multiple buttons on the same form.

Thank you in advance!

Answer №1

To enhance the readability and semantics, consider moving scope.Modify() inside the directive. This way, you can simply return false to prevent form submission and execute your desired logic within that function.

Plunker

                    scope.submit = function (event) {
                      submitController.setAttempted();
                      if (!scope.$$phase) scope.$apply();

                      if (!formController.$valid) return false;

                      scope.$apply(function() {
                          fn(scope, {$event:event});
                      });
                    }

                    formElement.bind('submit', scope.submit);

                    scope.Modify = function () {
                        // perform operations on scope.session
                        scope.submit();

                        alert('Modification successful!');

                        return false;
                    };

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

Multiple card displays not working with Javascript Fetch API

I wrote a script that retrieves data from a URL and then organizes it into tables for display to the user. Initially, the script functioned correctly. However, I decided to enhance its flexibility by introducing two parameters - name and HTML div name wher ...

Passing a dynamic data value to a click event in Google Analytics

I need help finding a solution for this issue. My goal is to track an event in Google Analytics through an onclick event, but I am struggling with passing a dynamic variable to the URL field. Below is the code snippet: <asp:hyperlink ID="Hyperlink2" r ...

When I move the Javascript code before the closing body tag, it doesn't work properly. However,

My console is displaying a message that says "[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience." This issue seems to be related to how I am loading my scripts - t ...

What is the process for transmitting video data to a video element for streaming?

A video stream is being generated by my Node.js process and I need to display it in my Node.js application. On the client side, there is a <video> tag where I want to stream the video from Node.js using the src attribute. I believe we might need to ...

The basic structure for organizing components and categories

I am working on creating a list and have designed the following Schema: new SimpleSchema({ element: { type: String, optional: true }, note: { type: String, optional: true }, order: { type: Number, optional: true } }); Now, I wan ...

Local copies of the Javascript game will have objects spawn in the game, but when uploaded the objects

I'm currently developing a simple Javascript game where the objective is to avoid falling objects using GameQuery. The game features frequent enemy spawns and occasional power-ups. I noticed that the power up spawn function is essentially a duplicate ...

Exploring cloud photos on an Android browser with the help of FileReader

This snippet of javascript code creates an image upload button and displays the uploaded image: function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { ...

Error encountered in Express middleware: Attempting to write private member #nextId to an object that was not declared in its class

Currently, I am in the process of developing a custom logger for my express JS application and encountering an issue. The error message TypeError: Cannot write private member #nextId to an object whose class did not declare it is appearing within my middle ...

Is it possible for elasticsearch to calculate a cumulative total for a numerical field as it runs?

When utilizing a facet such as "histogram": { "key_field": "timestamp", "value_field": "amount", "time_interval": "1d" } The resulting set includes the following: { key: 1222732800000 count: 642 min: -985 max: 483.25 total: 154 ...

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

Utilizing a variable beyond the confines of the script tag

Is there a way to assign the value of my variable place to my variable address, even though they are not in the same script tag? I want to bind the value and utilize it for fetching data. When I log my variable place, I can see the address, but I am unsure ...

How to connect a checkbox and a listbox in Angular 2

I am trying to create a functionality in Angular 2 where I have a checkbox with three options. Each option should be bound to a different select list, so that when the checkbox is checked, the corresponding list box is displayed. Can anyone guide me on h ...

Transferring a JavaScript Value to a PHP Variable (Under Certain Constraints)

Although I have reviewed existing questions and answers related to this issue, I found that the solutions provided do not suit my specific situation. Discussing the differences between client-side JavaScript and server-side PHP, two common solutions are: ...

Combining Objects in Angular 2: Extending Your Data Structures

Looking to combine 2 objects in Angular 2? In AngularJS 1, we used the "merge" and "extend" functions: https://docs.angularjs.org/api/ng/function/angular.merge https://docs.angularjs.org/api/ng/function/angular.extend However, it seems like there is no e ...

Dealing with repetitive HTML elements in Angular JS: Tips for managing duplicate code such as headers and footers

After reading the Angular JS introduction, I noticed that there was no mention of a method to write your HTML header and footer code once and have it automatically included on all pages. Is there an official or recommended way to achieve this? ...

Positioning the camera for an infinite ThreeJs gaming experience

I am currently learning Three.js and attempting to create my first game: an endless runner. After reading this article, I aim to create a similar game where the main character, a blue ball, rolls infinitely forward while dodging obstacles that appear in i ...

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Script is functioning as expected in Google Chrome, but is not responsive in IE and Mozilla browsers JavaScript code: <script src="jquery.min.js"></script> <script> function Run() { if(jQuery('#inputtext').val() == '0 ...

Achieving a Stacked Image Effect Upon Clicking

I have a neat slideshow on my website showcasing 10 different images. My goal is to let users click on any image in the slideshow and have that specific image display below the slideshow without affecting its position. Instead of using a lightbox or moda ...

Utilizing ES6 promises in node.js to send a null response

I'm looking for assistance on how to execute a query using ES6 native promises in node.js. The code I have below is what I've been working with: let arr= []; conn.query('select * from table1', (err, b) => { for (let i = 0; i ...

Exploring AngularJS 1.x: Understanding the differences between isolated scope and using require with ngModel

Throughout my experience with Angular 1.x, I have always used isolated scope in my directives. However, recently I encountered a directive that solely utilized ngModel. This made me curious about the differences and potential issues when using both methods ...