Tips for implementing $watch in AngularJS class to enhance form validation

My goal is to implement a $watch in order to verify the validity of a form input.

// customCtrl.html

 ....
             <div class="row" ng-form="customCtrl.customForm">
                            ...
                      <div class="form-group">
                        <label>ADDRESS</label>
                        <input
                            class="form-control"
                            id="address"
                            type="text"
                            ng-model="customCtrl.customEdit.address">
                      </div>
    ...

// customCtrl.js

 ...
    class CustomController {
        constructor($scope,
                    ...
                    ) {
    ...
        }
    ...
    
    canSaveCustom() {
        return this.customForm.$valid;
    }

...

I would like to set up a watcher using the following approach:

$scope.$watch('customForm.$invalid', function(isInvalid)          {
        $scope.disableSubmitBtn = isInvalid;
});

However, I am uncertain about where exactly in the code base I should insert this watcher.

Answer №1

I recently implemented a new function, validateData(), for handling ng-change events:

// testCtrl.html ...

                   <input
                        class="form-control"
                        id="name"
                        type="text"
                        ng-model="testtCtrl.testEdit.displayName"
                        ng-change="testCtrl.validateData()"
                        autofocus
                        required
                    />

// testCtrl.js

validateData() {
            this.disableNextBtn = !this.testForm.$valid;
    }

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

Adjusting the "this.var" variable within the Controller does not affect any changes

Apologies for my poor English. I have been exploring the use of controllerAs as Namespace and 'this' instead of $scope Here is a brief example: <html ng-app="MyApp"> <head> <script src="https://ajax.googleapis.com/ajax/lib ...

AngularJS controller's scope variable retains its values upon revisiting the view, without getting cleared

Currently, I am developing an AngularJS client application that interacts with SignalR 2.2. Furthermore, the Angular application utilizes the Angular UI Router library. This is what my hub class, MessagingHub.cs, looks like: public class MessagingHub : H ...

Tips on adjusting Table Cell width within Material-ui React table

I created a table in my React application by following the examples on their website. Everything is working well, but I am facing an issue with adjusting the width and padding of the columns. I attempted to manually set the width for each cell like this: ...

Retrieve information according to the object ID with AngularJS UI-Router and $stateParams

I have a unique application that directs to a custom URL based on a specific employee ID parameter when an individual employee is clicked in a list. Upon clicking the employee, users are redirected to a detailed employee page with their ID property as a pa ...

What is the best way to showcase information stored in a (mongo) database on an HTML webpage?

After successfully connecting to my database, I can view the data in an array using the code snippet below: app.get('/goalkeepers', (req, res) => { Transfer.find({}, (err, found)=>{ if (err) { console.log(err); } e ...

AngularJS: Initiate a Bootstrap modal upon webpage loading

As I work on designing a web application using AngularJS, I aim to implement the launching of a bootstrap modal upon page load through AngularJS. Here is the structure of my modal: <div class="modal hide fade" id="myModal"> <div class="moda ...

Using httpRequest to handle binary data in JavaScript

Having trouble deciphering the response of an http request that is a binary datastream representing a jpeg image, despite numerous attempts. Edit: Including the full code snippet below: xmlhttp = false; /*@cc_on@*/ /*@if (@_jscript_versio ...

Close CSS Accordion when Clicked

I have a CSS accordion that I would like to close each panel upon clicking. Can this be accomplished using only CSS, or will JavaScript need to be added? #accordion input:not(:checked) + div { display: none; } #accordion input:checked + div { displ ...

Struggling to get the findAndModify or Update functions to work properly in MongoDB. Despite fetching the desired data from my ajax call, I am unable to make any changes in the database

Here is the ajax code snippet: $(function () { $("#upvoteClick").click(function () { $.ajax({ type:"POST", data: {upvote: 2}, dataType: 'json', url:"http://localhost:9000/api/upvote" }).success(functi ...

Updating the VueJS DOM when a different value is chosen from the dropdown menu

I am facing an issue with updating the DOM using the following logic: index.vue [Template Part] <div> <div v-for="obj in objects" :key="obj.id"> <select v-model="obj.quantity" @change="qtyChange(obj)"> < ...

Conceal the div if it remains unhidden within the following 10 seconds

This piece of code is designed to show a loader image until the page finishes loading. Here is the code snippet: document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { $('#unti ...

Submitting a form with AJAX can still result in multiple values being sent to MySQL, even when using methods like bind, un

After facing a common issue with my AJAX code, I made some adjustments to the script. My implementation involves taking input from text fields and an image, then submitting this data to the database along with the file path. $(function () { $('f ...

"Learn the steps to enable a click-to-select feature for an item, allowing you to drop it in a different location

I've been spending quite some time trying to come up with a solution for my dilemma. The issue arises because I'm not looking to use drag and drop functionality. https://i.stack.imgur.com/Nh1Db.png My goal is to have 3 divs named 1,2,3 as desig ...

Changing the CSS attributes of a DIV element while inside a complexly nested IFRAME

Currently, I am dealing with a business intelligence tool that restricts me to working within a deeply nested iframe in order to add code. My goal is to leverage jQuery and/or JavaScript to adjust the left and position CSS of a div located three iframes ab ...

"Downloading an image from an encoded base64 canvas triggers an error due to exceeding the maxUrlLength

I'm using javascript to create a canvas drawing on my webpage and then convert it into a base64 image format. After that, I encode the URL of the image to obtain an encoded URL. I came across a post where it was mentioned that using window.location.hr ...

Unusual behavior encountered while attempting to reset input text using AngularJS

I'm encountering an issue with what I assumed would be a straightforward scenario. Here is the form in question: <form class="form-inline" role="form"> <div class="form-group"> <input type="text" ng-model="customerInput" size="80 ...

Is there a way to display a popover outside of the scrolling area?

One issue I'm facing is that the popover always appears within the scroll area. This means that I have to scroll down in order to view the popover content. Even though I've tried using z-index, I can't seem to show the popover outside of the ...

Tips for minimizing the number of .js and .css files loaded when utilizing ng-view

Is there a way to optimize the inclusion of .js and .css files in index.html without including all of them like in the example below: <!DOCTYPE html> <html ng-app="MyApp"> <head> <base href="/"> <meta charset="utf-8"> & ...

Temporarily suspend an application when a user initiates a new tab in AngularJS

I've successfully created a music application using AngularJS. Users can play, pause, skip to the previous or next song on their tab. However, I'm looking to enhance the functionality even further. My goal is to have the music automa ...

Setting up a webpack configuration for js using ng-annotate-loader and babel-loader

I've experimented with two methods for simultaneously using ng-annotate and babel loaders on my *.js files. { //successfully executed test: /\.js?$/, loader: 'ng-annotate!babel?presets[]=es2015' } { //encountered a problem ...