How can I deactivate all form controls within an AngularJS form?

To prevent any changes to the form components when the view button is clicked, I need to disable them. Here is my form:

<form action="#" class="form-horizontal" >
   <div class="form-group">
      <label for="fieldname" class="col-md-3 control-label">Name</label>
      <div class="col-md-6">
         <input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
      </div>
   </div>
   <div class="form-group">
      <label for="fieldhname" class="col-md-3 control-label">House name</label>
      <div class="col-md-6">
         <input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />
      </div>
   </div>
   <div class="form-group">
      <label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
      <div class="col-md-6">
         <input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
      </div>
   </div>
   <div class="col-md-3"></div>

</form>

And here is my view button:

<input type="button" class="finish btn-success btn" ng-click="view(newItem)" value="view"/>

Answer №1

Instead of managing individual fields separately, consider grouping all form elements within a fieldset and utilizing ng-disabled to deactivate the entire set.

Answer №2

To incorporate the functionality of disabling buttons, consider utilizing the fieldset tag to enclose your buttons and implementing the ng-disabled attribute:

<form action="#" class="form-horizontal" >
   <fieldset ng-disabled="isClicked">
      <!-- Insert your form elements here --!>
   </fieldset>
</form>

In order to activate this feature, simply utilize the view(newItem) function as follows:

$scope.view = function(newItem){
   $scope.isClicked = true;
   // Insert your code here and remember to set it back to false once completed
}

Answer №3

One option is to utilize an overlay with a ng-show feature, or alternatively, you could apply ng-disabled to each input.

Answer №4

  • Assign a scope variable upon clicking the display button.
  • Employ ng-disabled along with the assigned scope variable to deactivate the input fields.

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

Building paths through a jQuery loop

Transform String into Delimited Array, Generate Loop of Check Boxes, and Build New String Given String = "Folder Tier1\Folder Tier2\Folder Tier3\Folder Tier4\Folder Tier5\Folder Tier6\" (Missing) Use "\" as a delimi ...

Incrementing numbers automatically within a JSON object while iterating through a for loop

I am struggling to figure out how to append the var i to the left side of the object declaration. This error is causing me troubles. Any assistance in resolving this issue would be greatly appreciated. If you have any alternative solutions, I am open to e ...

Vim: Turn off autocomplete when using insert mode key bindings

I've set up a mapping in insert mode to automatically indent brackets: inoremap [;<CR> [<CR>];<Esc>O<Tab> When I use it, the result looks like this (the pipe character represents the cursor): const a = [ | ]; Now, I want ...

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

I'm working with an element in my HTML where I need to determine the type of a variable, specifically whether it's a boolean or not. <button process-indicator="{{typeof(button.processIndicator) === 'boolean' ? 'modalProcess&apo ...

Develop search bar button and file directory components

Within this application, there is a search engine designed to scan through the file tree for specific content. The goal is that upon entering a search query and clicking the Search button, the file tree will filter and display the relevant information. Cu ...

Violation of Content Security Policy directive has occurred

During my full-stack project development, I encountered an issue with the inclusion of the bundle.js file in my base HTML file using a simple script tag. When trying to render the page and utilize the JS functionality, I faced a content security policy vio ...

Retrieving individual data elements from an array with the help of the .find() method

I am struggling to display specific details of an object within an array by using .find() method, but I keep receiving undefined as the output. Below is the code snippet where I attempted this, when I log the ID, I can see a value, however, when I try to ...

Iterating through HTML table data using a JQuery for each loop

Currently, I have an HTML table that is structured in the following way: <div class="timecard"> <h3>tommytest</h3> <table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;"> < ...

How can I retrieve the ultimate value of a JQuery UI Slider and store it in a PHP variable?

I am looking to add 2 JQ UI Sliders to a single page on my PHP website. I need to capture the final values from both sliders (the last value when the user stops sliding) and store them in PHP variables for multiplication. How can I accomplish this task? I ...

"Exciting developments in Angular 17 with the introduction of the new @

I need to output elements from an array of strings starting at index 1. arr = [ "str1", "str2", "str3", "str4", "str5" ] The desired output is: str2 str3 str4 str5 To achieve this, use a new @for loop in ...

Customizing Material UI Components: Implementing the onChange Method

I've been working with the materia kit react template from creative-tim: However, I noticed that the customerInput component in this template lacks an onChange method. Does anyone have a solution for handling user inputs using this specific template? ...

Struggling to Enforce Restricted Imports in TypeScript Project Even After Setting baseUrl and resolve Configuration

I am facing challenges enforcing restricted imports in my TypeScript project using ESLint. The configuration seems to be causing issues for me. I have configured the baseUrl in my tsconfig.json file as "src" and attempted to use modules in my ESLint setup ...

Issue with Angular directive failing to update object within ng-repeat loop

I am working on a directive that is responsible for displaying a tree of folders, including the ability to show subfolders. The directive uses recursion to handle the display of subfolders. <div ng-click="toggleOpen()" class="action"> <span ...

Troubleshooting Issue with Internet Explorer failing to update Asp.Net MVC3 Partial View

I am experiencing an issue with a page that includes a div for a partial view loaded via an ajax request. $.ajax({ url: 'CompleteSessions', success: function (data) { var selector = $('#complete-session-sect ...

Working with scrollIntoView in useEffect (Encountering an error trying to access 'scrollIntoView' property of null)

Starting from scratch, I'm working on setting up my webpage and crafting some code. function BasicDetails() { React.useEffect(()=>{ scrollView(); }, []); function scrollView() { document.getElementById('main-root& ...

When making a POST request from the client-side JavaScript, the req.body is coming back as an empty

I have been encountering several questions related to the same topic, but unfortunately, none of them have resolved my issue. Hence, I am posting a new question here. My objective is to send a POST request from client-side javascript to the Backend using ...

Using a Function to Retrieve Styles in React Native for Android

My goal is to dynamically add views based on the data received from JSON. Each event should be represented with a different color: red or blue. The app will insert a view accordingly. class MainPage2 extends Component { constructor () { super() var s ...

The expected behavior is not displayed when using Async.waterfall within a promise queue

In our software implementation, we have utilized a promise queue feature using the q library. The sequence of functions is structured as follows: PQFn1 -(then)- PQFn2 - .... Within PQFn1, an array of values is passed to a callback function implemented wi ...

JS : Removing duplicate elements from an array and replacing them with updated values

I have an array that looks like this: let arr = ['11','44','66','88','77','00','66','11','66'] Within this array, there are duplicate elements: '11' at po ...

Building personalized error messages using graphql-js and express

It has come to my attention that you have the ability to create customized errors within graphql and graphql-express. https://codeburst.io/custom-errors-and-error-reporting-in-graphql-bbd398272aeb I recently implemented a custom Error feature, but it see ...