The validation of form.$invalid appears to be malfunctioning when using the Angular UI date picker

There are two fields on the form, one for selecting a due date and another for entering a number.

The due date field is a date picker where you can choose a date or manually enter a number to set the date.

The create button gets enabled only when setting the date using the date picker, not when entering the value in the text field. Can someone explain why? Here is the link to jsfiddle: fiddle

Answer №1

Your date parsing logic has some errors, Try updating your function like so.

$scope.calculateDueDate = function() {
    var daysToAdd = parseInt($scope.daysFrom);
    var newDate = moment(new Date()).add(daysToAdd, 'days').format('YYYY-MM-DD');
    $scope.newDueDate = newDate;
}

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

Solving the checkbox toggle challenge with recursive functions | Recursive checkbox challenge

I'm currently working on creating a checkbox tree with the following data structure for items const checkboxes = [{ field: 'ARTICLE', id: 41, name: 'Article', parentId: null, checked: false, children: [ ...

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?

Within my project, some common functions are stored in separate .ts files. Is there a way to incorporate i18n in these cases? // for i18n import Vue from 'vue' declare module 'vue/types/vue' { interface VueConstructor { $t: an ...

Data is getting erased while dynamically populating the AngularJS dropdown multiselect

Currently, I am utilizing the angularjs-dropdown-multiselect.js plugin to generate a multi-select drop-down. My goal is to dynamically fill the drop-down with data from a MySQL database. When I manually input an array of objects into my scope, the drop-d ...

Tips for keeping components mounted despite changes in the path

How can I maintain state in React routes to prevent unmounting when switching between them? In my application, it's crucial to keep the state intact during route changes. When changing routes, the respective components mount and unmount. How can this ...

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

1.) I've set up a nested table and now I want to ensure that when the 'Delete' button within the child table is clicked, its corresponding row gets deleted. 2.) I have a <select> tag. The issue is how can I implement validation to che ...

angular2 with selenium webdriver: Issue with resolving 'child_process' conflict

I followed these steps: ng new typescript-selenium-example npm install selenium-webdriver --save I also made sure to copy chromedriver to my /Application. I updated the app.component.ts file as shown below: import { Component } from '@angular/core ...

Performing a password-protected JavaScript Ajax request that includes special characters

Within my JavaScript page, I have implemented an Ajax call shown in the code snippet below. The PHP page resides within a corporate intranet that demands domain authentication (without basic auth). To extract the username (u) and password (p), I am using j ...

"Retrieving Data Using jQuery's .ajax Method in Visual Basic

<WebMethod()> Public Shared Function gtet() As String ... Dim GET = uClass.GetSets(dbuser, dbparam1) ... End Function and $(document).ready(function () { data = { }; var jsondata = $.toJSON(data); $.ajax({ type: "GET ...

Enhancing a React modal to enable user input for updating state variables

Is there a way to utilize user input from the page to dynamically create elements in a React.js application? In my app.js file, I have defined some constants at the beginning for mock data: const book1 = [ {id: uuid(), content: 'reflections&apos ...

Is it possible to update a module on an end user's device without using npm or node.js?

Currently, I am working on developing an electron application along with a module that it uses. My main concern is ensuring that this module gets updated on the end user's machine whenever there is a new version available, even if they do not have NPM ...

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

Implementing conditional validation in Formik on cancel button click in a React application

When defocusing from the field without entering any data, a validation error occurs. Similarly, if you click on the submit button without giving a value, a validation error is triggered - this behavior is expected. However, how can we prevent the validat ...

FNS Date-Timezone Abbreviation

Is there a way to shorten the Australian Eastern Daylight Time abbreviation to just AEDT? When I use it currently, it displays as 11/11/2022 15:29:25 Australian Eastern Daylight Time. I would like it to show as 11/11/2022 15:29:25 AEDT import { formatInT ...

A jQuery component with built-in event triggers

Here's an example that illustrates the concept: a widget needs to utilize its own method as a callback: $.widget("custom.mywidget", { _create: function() { this.invoke("mymodule", "myaction", {arg: this.options.value}, this.parseData); ...

MongoDB failing to enforce unique constraints on partial indexes

I have a set of data that looks like this: { name: "Acme co." add4: "", nationalNumber: "+13412768376" }, { name: "Acme Inc.", add4: "6345", nationalNumber: "" } My goal is to insert these records into a collection, but only if they are uni ...

Changing the color of a highlighted face on a PlaneGeometry in ThreeJS

I am trying to figure out how to change the color of a specific face when hovering over it in my PlaneGeometry, but I am having trouble getting the selected face. Below is the code I have so far: //THREE.WebGLRenderer 69 // Creating a plane var geometr ...

Discovering how to choose an element from a list fetched through ajax in Angular

It's quite strange to me. Angular allows for selecting by reference, but not by value. Let me explain my situation: I have a form that lets users edit a model. I use ajax to fetch both the model and a list of possible values for one of the model&apo ...

Tips for modifying a request api through a select form in a REACT application

Apologies if this question seems a bit basic, but I need some help. I am working on creating a film catalog using The Movie Database API. I have successfully developed the home and search system, but now I am struggling to implement a way to filter the fi ...

Determine if a file input is linked in React.js Material UI

Currently, I am working with a Material UI <TextField /> component that has a type=file prop to allow file attachments. My goal is to trigger an event when a file is attached to this TextField. However, my search results only provided JQuery soluti ...

Creating a texture in Three.js using an image file

Having some difficulty with creating a texture from an image file using Three.js. Currently, attempting to create a mesh using the following function: var image = document.createElement('img'); image.src = imageFile; var texture = ne ...