Can a condition be included within an ng-click directive? I am attempting to prevent form submission if there are any errors present in the form, but I encountered a parse exception.
<input ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">
I experimented with using ng-disabled instead, but this caused my validation plugin to malfunction as the form was never submitted, thus not triggering the validation process.
Template:
<input ng-click="validateForm(profileForm.$valid)" name="submit"
id="submit" value="Save" class="submit" type="submit">
Controller:
$scope.validateForm = function(valid) {
if (valid) {
saveProfile();
}
}
While this information may seem irrelevant and unnecessary, it is worth noting that in JavaScript, there is no need to use the ternary operator as suggested in the ng-click statement above. Instead, you can utilize lazy evaluation ("or die") syntax. For example:
<input ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">
can be rewritten as:
<input ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit">
In this scenario, if the profile is invalid, nothing will occur. However, if it is valid, the updateMyProfile() function will be executed. This approach aligns with the concept shared by @falinsky in the referenced link.
Discovering a clever workaround that may be helpful for you, even though it's not the most elegant solution and I personally feel awkward using this line of code:
ng-click="profileForm.$valid ? updateMyProfile() : alert('failed')"
You might be thinking, 'I don't want it to trigger an alert("failed") if my profileForm isn't valid.' Well, that's the messy part. No matter what I put in the else clause of this ternary statement, it never seems to execute.
However, if it's removed, an error is thrown. So, I just inserted a pointless alert.
Yes, I agree, it's not pretty... but strangely enough, I don't encounter any errors when I implement something like this.
The more proper approach, as mentioned by Chen-Tsu, is definitely recommended, but everyone has their own preferences.
If you find yourself needing to handle the situation in this manner, there are several approaches you can take:
This method is straightforward and simple.
<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >
This option may be suitable when dealing with more complex content that needs to be shown or hidden.
<div ng-if="profileForm.$valid">
<input ng-click="updateMyProfile()" ... >
</div>
<div ng-if="!profileForm.$valid">
Sorry! We need all form fields properly filled out to continue.
</div>
(keep in mind, there's no ng-else functionality...)
This approach involves indicating to the user where they can find the button (eliminating any search effort), while also providing an explanation as to why it cannot be clicked.
<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >
<div ng-if="!profileForm.$valid">
Sorry! We need all form fields properly filled out to continue.
</div>
Found this helpful tip on , demonstrating how to handle inline conditional statements in AngularJS:
ng-click="variable = (condition=='X' ? 'Y' : 'X')"
One way to dynamically add ng-click event without relying on the disabled class is by checking a condition.
Here's an example in HTML:
<input ng-click="formValid && submitForm()" name="submitBtn" id="submitButton" value="Submit" class="btn-submit" type="button">
Transform into
<button type="button" onclick="validateAndUpdateProfile()" name="saveBtn" class="submit-btn" id="saveBtn">Save Changes</button>
Embedding conditionals within tags is possible. For example:
ng-class="{true:'selected',false:'unselected'}[current_state=='visible']"I'm currently working on manipulating an object loaded using OBJLoader in Three.js. The issue I'm facing is that while it's easy to manipulate the object once, I can't figure out how to do so during the animate loop or anywhere outside ...
Do you think there is a more efficient way to write this code? The function Z can be called with either one parameter or with no parameters. If the parameter Y is passed in, then the function z(y) is returned, otherwise just run the function z() async x ...
In my project with Laravel 5.3 and AngularJS, I send JSON data from AngularJS to the server like this: {"grc":{"id":1},"floatingGrcs":[{"days":"10","units":"100"},{"days":"20","units":"200"}]} Now, I need to extract and work with this array in my Laravel ...
Currently, I am utilizing npm-mqtt to retrieve information from a different mqtt broker. My objective is to add the obtained data to the array property of a specific class/component every time a message is received. However, I'm facing an issue wher ...
How do I implement an Angular directive in Salesforce using my directive HTML page? <apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false"> <td> <div class="address-container"> <p ...
When you click on an anchor with the class .extra, it adds the "extra-active" class and removes the "extra" class. However, when you click on an anchor with the extra-active class, it does not remove the extra-active class and replace it with extra. Here ...
Currently, I am working with a for loop that extracts data for each user from the matchlistResponsestats object. Once the for loop completes its iterations, I end up with approximately 90 arrays in this format: ["username", kills, assists, deaths] My goal ...
Currently, I am working on a project built with Ionic and Angular. The problem I am encountering is related to user signups. Whenever an admin creates a new user, the user receives a signup link. Upon opening the link, a signup form is displayed. Although ...
Here is my query: window.addEventListener("visibilitychange", function(e) { console.log(window.uidd) window.uidd = window.uidd || (new Date).getTime() + Math.random() console.log(window.uidd) }) However, if you open the console for the first time ...
Looking to transform an object with the following structure: { From: {"A","B","C"}, To: {"A1","B1","C1"}, value: {1,2,3} } I need to convert this array: [ {from: "A" ,to: "A1" , value: 1 }, {from: "B" ,to: "B1" , value: 2}, {from: "C" ,to: "C1" ...
My approach involves making a single API call and storing the response in a global variable within my Service. I then utilize two helper functions to share and manipulate this value between parent and child components. repairs.service.ts public myItems:a ...
I am looking to develop a feature where I can toggle individual boxes on and off by clicking on them. Currently, only one box at a time can be activated (displayed in green), but I want the ability to control each box independently without affecting the ot ...
My table consists of buttons on the right-hand side for a menu. The first button in the menu is supposed to open a modal box upon clicking. However, the first buttons in the subsequent rows do not function as expected and fail to open the modal. Refer to t ...
I'm trying to retrieve the values of a jQuery button upon form submission, but my current setup is not working. Specifically, I need to extract the value of data-url. Below is the code snippet I am using: $("#addAgency").submit(function(event) { ...
When a user uploads their own photo, I resize the image, add an ng-click attribute, compile it, and append it to a new element. This process is triggered once upon photo upload: var myElement = angular.element(image); // getting the image myElement.attr( ...
I am trying to create an if statement in JavaScript; if (nextProcessingDate > today ) { //do something } nextProcessingDate has a timestamp assigned, like 09/07/2014 12:10:17 To assign today's timestamp to the today variable, I am using this c ...
There are two textboxes in this scenario. The first box should always contain 4 digits when you leave it, while the second box should always contain 10 digits. A javascript function needs to be implemented so that when a user leaves one of the textboxes, ...
<!DOCTYPE html> <html> <head> <title>Hello</title> <meta http-equiv="Content-Type" type="text/html" charset="UTF-8"/> <style> *{margin:0; padding:0;} .mySlides{ position:relative; width:1000px; ...
I've been working on integrating `mobx` into a virtual reality application built with React 360. Initially, I attempted to use the decorator syntax without success, so I decided to switch to the non-decorator syntax. While going through the mobx docum ...
I'm currently working on a basic lambda function that utilizes a post request to insert data into DynamoDB. However, every time I deploy the lambda function and test it using Postman, I keep encountering a 502 Bad Gateway error. To troubleshoot this ...