Are you getting An invalid form control with name=” is not focusable message on your browser’s console log? Don’t be worried about this problem. Here is the quick fix for this issue.
First of all why it’s happened? It’s happened when you have some hidden fields with required true and these fields have no parent ‘form‘ element. In that case, this error might happen. Especially when you work on Jquery, AngularJS.
To fixed this issue you can just add ‘novalidate’ in your opening ‘form ‘ tag. Just like that <form action” novalidate>
By default when you write something in ng-model directive (in an input field) then the ng-modal value is automatically changed.
But if you want to make that changes happened after a task done. Then you need to modify this default behavior of ng-modal directive. To modify the default behavior of ng-modal directive you need to use ngModelOptions directive.
Prevent ng-model Changes Before Updating Form Data
Prevent ng-model Changes Before Updating Form Data
ngModalOptions allows updateOn and debounce properties which tell when value need to change of ng-modal. updateOn property is for either value will change or not and debounce property is for delay time show to updated value.
See the sample code snippet
In this code snippet, you can see Name & Email will be changed and shown after updating these data (into the database). If any error or warning occurred when updating the value into the database then the value will not update and will not show the update value as well.
And also here I have cancelUpdate() method (with $rollbackViewValue) for canceling update user’s data. Suppose you write something then decide you will not update it. Then you have to click on ‘Cancel’ button. And $rollbackViewValue is responsive to revert ng-modal changes value
I hope you this article will help you to prevent ng-model changes before updating form Data with canceling update option.
AngularJS is the web application development framework which provides a flexible way to build testable and maintainable front-end applications. Generally, AngularJS javascript MV framework which is developed by google for build dynamic web application. For more details click here.
How to Start?
It’s really easy to start AngularJS. Just need to downloadAngularJS JavaScript file, and add to your web page with a script tag: You can also add it from remote url (e.g. http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js). Here is an example code, so you can see how it works.
Explanation of this Code:
Here I will use 3 types of directives of AngularJS which are:
ng-app: This directive will define the angular application, That means this ng-app directive is for initializing the Angular into the page.
ng-model: This directive binds/takes the value from HTML controls (input, select, text area) to application data.
ng-bind: This directive display the application data to the HTML view.
You can see ng-app directive is declared into the body tag that means Angular is initialized among whole web page. and the ng-model directive is declared three times called (name, title, and comment) and which was binds by {{name}}, {{title}}, {{comment}} {{name}} bind for ng-model="name", {{title}} bind for ng-model="title", {{comment}} bind for ng-model="comment"
Output
What is AngularJS and How to Start
Hope you can learn the basic concept of AngularJS from this article. Thanks!!!
