Prevent user from proceeding if ng-disabled is set to true in Angular JS

Here's the situation I am dealing with:

<input type='text' ng-model='SampleDTO'>

<input type='text' ng-model='SampleDTO2' ng-disabled='SampleDTO == null'>

The issue arises when I input a value for the first input and then another value for the second. If I remove the value from the first input, the second input gets disabled. However, when I pass these values to the controller, the disabled field is also included. How can I ensure that disabled fields are not passed to the controller?

Answer №1

Give this method a shot:

<input type='text' ng-model='SampleDTO2' ng-if='SampleDTO != null'>

When using this approach, the field will vanish (based on the condition) and the model won't be connected to it

Answer №2

If you need to display a disabled text field, follow these steps:

<input type='text' ng-model='SampleDTO'>

<input type='text'  ng-disabled='SampleDTO == null' ng-if='SampleDTO == null'>

<input type='text' ng-model='SampleDTO2' ng-if='SampleDTO != null'>

This method will result in a disabled text box without any associated scope.

I hope this solution proves useful!

Answer №3

To achieve the desired outcome, you have the option to include ng-hide in your code like this:

<input type='text'  ng-enabled='TestObject == null' ng-model='TestObject2' ng-hide='TestObject == null' >

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

Encounter a 401 error code while attempting to fetch data from CouchDB using an AJAX request

I attempted to make an AJAX call in a JavaScript file to fetch data from CouchDB. Unfortunately, I encountered a 401 error message: Failed to load resource: the server responded with a status of 401 (Unauthorized) This is an extract of my JavaScript cod ...

JavaScript and PHP utilize Ajax to keep track of previously loaded content

I'm encountering a strange issue that I've been trying to troubleshoot for some time now with no luck. I'm currently developing a website and have decided to load each subpage (content) dynamically using AJAX, including .js and .css files fo ...

How can you include a multi-layered array within another multi-layered array using TypeScript?

If we want to extend a two-dimensional array without creating a new one, the following approach can be taken: let array:number[][] = [ [5, 6], ]; We also have two other two-dimensional arrays named a1 and a2: let a1:number[][] = [[1, 2], [3, 4]]; let ...

Tips for preventing chunk loading in webpack: [Angular] [inline js]

Currently, I am working on bundling an Angular project into a single file that includes JS, CSS, and HTML. So far, I've successfully integrated the HTML and CSS, and have made the JS inline using HtmlWebpackInlineSourcePlugin. The minified JS files ge ...

Tips for implementing ajax and codeigniter to load additional comments on a web page

Is it possible to customize Codeigniter's default pagination to achieve a "viewMore" link style when loading more records using AJAX? The challenge lies in creating a div that automatically expands to handle large numbers of records, such as 10,000 a ...

The content in my textarea disappears once the submit button is clicked

I have a script that deletes the text from my textarea after a user clicks the submit button. However, I would like the text to remain in the textarea after submission. <form action="/search" name="myform" id="formid" method="post"> <div cla ...

Generate a new TreeView using the checked checkboxes from a current TreeView

I am currently working on implementing a dynamic user access feature for specific nodes within an existing treeview that is also dynamic. The primary TreeView that I am using contains checkboxes and gets populated from a database. Additionally, there is a ...

What could be the reason my "mandatory" function is not providing any output?

Recently, I've been working on an Express.js application that handles POST requests with a "city" parameter in the body. The application processes this request and utilizes an external service for further operations. To maintain clean code, I separate ...

AngularJS error handling not receiving error response from Asp.Net API

I am using an Ionic app that interacts with an asp.net web API. Within the code, there is a HttpResponseMessage being utilized. [Authorize] [Route("api/products/search/{term}/{page}")] [HttpGet] public HttpResponseMessage SearchProducts(string term, int p ...

How to resolve the issue of Material-UI popover interfering with onClick event of button in React.js

In the Header.js file, there is a button called <ReactSvg> nested within an <IconButton>. When this button is clicked, it triggers the switchTheme() function to change the page theme. Additionally, when hovering over the button, a popover appea ...

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

Material UI - Array of Chips

I have been working on creating a ReactJS component that displays an array of chips with unique styling for each one. To achieve this, I created individual makeStyles classes for the chips. However, I encountered difficulties in dynamically changing the cl ...

Utilize AJAX to dynamically refresh the page without having to reload it, enabling the use of both POST and GET methods

In order to avoid reloading the page when refreshing, I am utilizing Ajax for this particular 3-sided content along with JavaScript. Here is the code: Content: <ul id="nav"> <li><a href="ajax_adat.php?id=8&epul=0">Data</a>< ...

Calling Ajax in JavaScript

Trying to fetch a value in JavaScript using an Ajax Call, The code being used is as follows: <script> var value = $.ajax({ type:"GET", url:"get_result.php", data:"{'abc':" + $abc + "}", }); alert(val ...

Incorporating Jquery and additional JavaScript libraries into a Firefox extension

Is there a better method to include jquery and other scripts in my Firefox extension? While I know this question has been asked multiple times on SO, none of the responses were very helpful. I attempted using the following code in one of the JS files wher ...

How can I use ajax to validate a password that is shorter than 8 characters?

I need to validate the user's username and password to ensure they are at least 8 characters long. Previously, I used the onsubmit="return Validation()" attribute in the form, which worked fine. However, I am now submitting the form via ajax and I&apo ...

Angular's Readonly component fails to display line breaks

I am currently developing an Angular application using C#. One issue I have encountered is with read-only components that display saved data from the database. For instance, when inputting text into a Textarea component, such as: hello there hello ...

I'm curious if the response order will mirror the URL order in my situation

QUERY: Upon reviewing the following link: Promise.all: Order of resolved values I am doubtful about its relevance to my specific scenario. Can I always expect responses to be in the same order as urls? EXAMPLE: var urls = []; for (var i = 0; i < d ...

Experiencing excessive memory usage when attempting to load a large JSON file in Firefox

We are in the process of developing a client-based application using HTML5 and indexedDB on Firefox 28. When large amounts of data are loaded to Firefox for the first time using AJAX requests in JSON format, each JSON response is approximately 2MB (gzipped ...

Axios fails to process the PUT request

I am looking to update the information in a row of my table created using Node.js on the backend, React on the frontend, and MySQL for the database. This is my Edit class: constructor(props) { super(props) this.state = { clients: [], Preno ...