Leveraging ng-model-options in conjunction with ngModelController

Question

Leveraging ng-model-options in conjunction with ngModelController

I am attempting to postpone the validation of a custom textbox component. My goal is to only validate the input when it loses focus. The current component does not employ ng-model within the input itself, but instead utilizes the ngModelController in the controller of the custom component like this:

<input type="text" name="name" ng-required="true"/>

Is it possible to still utilize ng-model-options with onblur to delay the connection between the template and the controller?

If I am using ngModelController inside the component's controller without using ng-model within the input element, is there a way to use ng-model-options to delay input binding? Or perhaps there is another clever approach to achieve this?

javascript angularjs angularjs-directive angular-ngmodel

Answer 1

Answer №1

https://example.com/jsfiddle

Implement the use of ng-blur

<input type="text" name="username" ng-required="true" ng-blur="checkValidity($event)"/>

$scope.checkValidity = (e) => {
  console.log(e.target.value); // displaying input value
  // add your custom validation logic here
}

Answer 2

https://example.com/jsfiddle

Implement the use of ng-blur

<input type="text" name="username" ng-required="true" ng-blur="checkValidity($event)"/>

$scope.checkValidity = (e) => {
  console.log(e.target.value); // displaying input value
  // add your custom validation logic here
}

Leveraging ng-model-options in conjunction with ngModelController

Answer №1

Similar questions

The React date picker has limitations, as there are certain dates that users are unable

What is the best way to trigger the second function on a click event?

Is it possible to use both interfaces and string union types in TypeScript?

Namespacing is not applied to dynamic modules in Vuex

The request to http://localhost:3000/cartdata has encountered an internal server error (500) in the isAxiosError.js file at line

Exploring the power of AngularJS and Jasmine: testing multiple instances of a service in action

An error was encountered in the JSON syntax: Unexpected symbol <

Encountering a bad request error while attempting to update a numeric value in MongoDB

What is the best method for finding a button with an empty class name?

Array buffers are scheduled by BinaryJs and the Audio API

Authentication failure in Asp.Net MVC authorization during Web API request

Using custom class instances or objects within Angular controllers is a simple process

Adding vertices to a vertex buffer that has already been initialized in WebGL

Running a Gulp task to launch an express server

What are the steps to ensure availability validation with jQuery validation?

Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

Limiting the scope of the jQuery scrollToFixed functionality within various nested DIV elements

Doesn't the use of asynchronous programming in Node.js lead to a potential StackOverflow issue?

Arranging Controls in a Grid in a Vertical Formation?

Concentrate on implementing Cross-domain Ajax functionality in Opera browser