Create $validators outside of the ng-model scope

I’m working with a form element:

<form name="formDate">
    <input date-picker name="fundacao" ng-model-date="fTit.fundacao" required>
</form>

Additionally, I have created a custom directive:

app.directive('datePicker', function(){
    return {
        restrict: 'A',
        scope: {
            ngModelDate: "=ngModelDate"
        },
        link: function (ng, el, attr) {     
            // $validators HERE
        }
    };
})

The issue I am facing is that the "required" validation does not seem to be functioning properly due to the absence of an ng-model directive on the element.

I am seeking suggestions on how to validate a form using nonstandard directives like in the example above. Any insights or solutions would be greatly appreciated.

Answer №1

Implement a change function on an element for binding

app.directive('datePicker', function(){
return {
    restrict: 'A',
    scope: {
        ngModelDate: "=ngModelDate"
    },
    link: function (ng, el, attr,ctrl) {     
        el.bind('change',function(){
          //check the $(el).val();
         var isValid= check if the date is valid;
         ctrl.$setValidity('date',isValid);
         // First parameter is the validation key, second parameter is true if valid, false if invalid
    })
   }
 };
})

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

Substitute phrases with hyperlinks using JavaScript (or Ruby)

After researching numerous resources on SO, I have managed to come up with a solution that is very close to working. My goal is to replace words/phrases within a <p> tag with links using jQuery after the page has loaded (although I am open to a Ruby ...

Forming a JSON structure using input variables

Currently, I am attempting to construct a JSON object using variables extracted from a form. var firstName = $('#firstName').val(); var lastName = $('#lastName').val(); var phone = $('#phoneNumber').val(); var address ...

Improving model in AngularJS

Check out this Plunker: http://plnkr.co/edit/s9MwSbiZkbwBcPlHWMAq?p=preview I noticed that when I input the same information twice, the latest data overrides the previous one. How can I ensure that the model doesn't update in such cases? $scope.per ...

Ensure the vertical alignment of the error tooltip remains consistent regardless of the length of its content

I have been working on an error tooltip that appears when the user hovers over an input field. The tooltip is almost finished, but I am having trouble aligning it vertically with the input field. I have tried multiple solutions without success. Check it o ...

What is the reason behind unhandled promise rejections?

Whenever I send a post request using Postman to localhost:5000/api/profile/experience, I keep receiving these warnings: UnhandledPromiseRejectionWarning: ValidationError: Profile validation failed: experience.0.title: Path `title` is required., experience ...

AngularJs setPristine() not resetting the invalid status of a form

Is there anyone who can assist with the provided Plunker code? All you need to do is submit the form with just one required field filled out. This action will result in validation errors being displayed. When you reset the form by calling both setPristine ...

Angular's bidirectional binding feature seems to be malfunctioning when integrated with Firebase

I'm facing an issue with displaying a list of products from my firebase database. Despite updating the $scope.products array and seeing it reflected in the console log, the changes are not being reflected on the user interface. app.controller("produc ...

What is the best way to establish and concentrate on a fresh component in AngularJS?

I am working on a form that has a dynamic number of inputs, which is controlled by AngularJS. <body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)"> <form id="createPollForm"> <input class="create-input" ...

I attempted to access data from the phpmyadmin database, but the browser is displaying an error message stating "cannot get/employee", while there are no errors showing in the command prompt

const { json } = require('express/lib/response'); const mysql=require ('mysql'); const express=require('express'); var app=express(); const bodyparser=require('body-parser'); app.use(bodyparser.json()); var mysq ...

Tips for transferring a variable between routes in express-js

Currently, I am using npm disco-oauth to authenticate with Discord. After authenticating in the main app.js file, I store the userKey in a cookie using cookie-parser. This allows me to access user information and the guilds that the user is a part of. Howe ...

Tips for managing an interval for play, pause, and stop functions in JavaScript or Node.js

In my main file, I have an API to control the playback of a video. main.js const { mainModule } = require('process'); const { startVideo, pauseVideo, stopVideo } = require('./modules/video.js'); function init(payload) { if(payl ...

Error occurred while trying to create module 'app' in Angular and MEAN stack

Recently, I delved into the MEAN stack using Express, Node, Jade, and Angular. However, it seems like there's a problem with Jade that I can't quite wrap my head around. The error message I'm getting is: Uncaught Error: [$injector:modulerr] ...

Perform a task if a checkbox is marked or unmarked

Currently, I am working on an HTML form that includes a checkbox asking users if they have a phone number. I am facing an issue where I want to implement two actions: 1. If the user checks the checkbox, a new input element should appear on the same page ...

Storing Personalized Information in Thingsboard; Beyond Telemetry Data

I am currently utilizing the amazing platform of thingsboard. Imagine I have a basic User Form with the following fields: Username First Name Last Name Email Address Phone Number My goal is to store all this information in thingsboard. Can thingsboard h ...

What is the best way to iterate over JSON data and organize the output based on the key value?

Let's say I want to filter through the JSON data below and only push the home_team_conference if it matches Southeastern. My goal is to organize the data by home_team_conference in order to display each array on different pages of my website. Currentl ...

Preventing variables from reinitializing in express.js

Within my app.js file, I invoke a search function that communicates with an LDAP server. Upon doing so, the server sends back a cookie which is essential for my subsequent queries. My intention was to save this cookie as an app.local variable in my app.j ...

Issue with Ionic Back Button Persisting Even After Using $window.history.back()

In my Ionic application, I have a search template with a form that allows users to query posts by keyword. A service is in place to return the post(s) as a list on another view, and everything is functioning correctly. After submitting the search form, my ...

Prevent XHR from responding to OPTIONS method

Currently, I am in the process of developing an API that will be hosted on Azure functions and a Web App that will reside on Azure Blob storage. To ensure seamless communication between my API and the users' browsers, I have implemented proper handlin ...

How come two-way binding does not refresh the directives controller?

Following the guidelines set by John Papa in his style guide, I have implemented the ControllerAs syntax in my directive. However, the directive failed to update when changes were made to the bound variable. For example, even after updating mainCtrl.rules ...

Ways to Implement Named Module Exports in Node.js Version 16 Application

Currently, I am working with Node 16.3.0 and Express 4.17.1 (although the Node version is open to change) In my project, I have a file named session.js structured as follows: // session.js exports.fetchUserId = async function(token){ ... } exports.sav ...