I would like to reset the input data and then show it as empty

I attempted to clear the input information and show blank input fields.

This is my current input information:

 <input type="text" class="form-control  input-sm"
                                   required
                                   autocomplete="off"
                                   ng-model="q.startDate"
                                   date-range-picker
                                   options="$ctrl.ui.datePicker" />

I tried setting the data to null, but I am unsure of how to refresh the page to display empty input fields.

  clear() {
        this.newQuarters.forEach((_value, index) => {
              _value.start = null;
              _value.end = null;
              _value.allocation= false;
            });
        });
    }

Answer №1

AngularJS fundamentals.

<input ng-model="q.startDate">

Inside the controller:

$scope.q.startDate = ""; // This line will clear the input field

This solution is particularly suitable for your situation as you are using an input type="text" instead of date input.

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

Setting the values of a string array to the properties of an object dynamically in TypeScript

Imagine a situation where a component called searchBox is given two inputs: @Input() titles: string[] and @Input() model: Object. The number of values in the titles array matches the number of properties in the model object. The searchBox component generat ...

The response from AngularJS $resource can be considered as both an array and an object

Recently, I obtained this JSON file: [ { "name": "paprika", "imgSrc": "img/paprika.jpg" }, { "name": "kurkku", "imgSrc": "img/kurkku.jpg" }, { "name": "porkkana", "imgSrc": "img/porkkana.jpg" }, { "name": "lehtisalaatti", " ...

When utilizing an object as state in React, the `setState` function will only set

Currently, I am working on developing a React form that utilizes a custom Input component which I have created multiple times. The objective is to gather all the names and values from the form in the parent component: {inputName: value, inputName2: valu ...

Is there a way to identify which elements are currently within the visible viewport?

I have come across solutions on how to determine if a specific element is within the viewport, but I am interested in knowing which elements are currently visible in the viewport among all elements. One approach would be to iterate through all DOM elements ...

Issue with data-* attributes in MaterialUI React component causing TypeScript error

I am encountering an issue while attempting to assign a data-testid attribute to a Material-UI Select component. The Typescript error I am facing is as follows: Type '{ "data-testid": string; }' is not compatible with type 'HTMLAttributes&a ...

Newbie's guide: Configuring local host for Angular app with XAMPP on Windows 7

I recently transitioned my Angular App from running on a Local host using Visual Studio IIE server to testing it locally with XAMPP. As a beginner, I am encountering difficulties in getting the local host to recognize the HTML initialization file. Despite ...

Unable to reinitialize the DataTable using Angular Datatable

I've been working on an Angular application that has a simple CRUD functionality. Initially, I tested my data with a static HTML table and everything was functioning as expected. However, I decided to implement a data table framework called Angular da ...

Using Angular, a class can serve as a method within another class

I am new to Angular2 and encountering a problem. I have developed a component called info. In the info.component.ts file, I am initializing objects in the following way: import { Comm } from '../shared/comments'; ... const VASACOM: Comm = { na ...

Incorporating a Text Box in an Angular Form

I am facing an issue with dynamically adding a textbox to an Angular form using ng-repeat. When I push an empty string to the array, it successfully adds another textbox but the problem arises when the data is not synced properly with ng-model. The newly a ...

How can I use AngularJS to pass the selected option value from a dropdown to another part of the page as a parameter?

How can I extract the chosen option from a select element in AngularJS and display it elsewhere on the page? <div class="modal-body"> <form class=""> <div class="control-group"> <label class="control-label" for ...

Angular Bootstrap-Select: Displaying options even after selection

There seems to be a bug in the angular bootstrap select demo section. After selecting an option, the dropdown continues to display options instead of hiding them. This issue does not occur when the ng-model attribute is omitted. You can view an EXAMPLE he ...

What is the best approach to utilize the GET method in Angular 2 to call a SOAP API

I recently completed a project in Angular 2 and now I am looking to call a SOAP API using the GET method in Angular 2. While I have experience using SOAP in AngularJS 1 and found the packages quite easy to use, I have not been able to locate any packages ...

Unlock your account with NextJs Supabase Email verification token for resetting your password

I'm currently utilizing NextJs and Supabase to handle the process of resetting a user's password. Below is the server action in which I invoke the resetPasswordForEmail function to send an email to the client's mailbox: export const resetPa ...

Steps to include a Target property in a freshly created MouseEvent

Trying to dispatch a contextMenu event, I've noticed that in the MouseEvent interface for TypeScript, the target property is missing, even though it is documented in the contextMenu documentation. Here's my TypeScript snippet: const emulatedMou ...

AngularJS losing data binding without any errors being thrown

It seems I am struggling to create complex data models in my controllers. Every time I attempt to do so, the code fails silently. Simple data models like $scope.conversationList = [123456]; work perfectly fine using ng-bind and when used in a directive te ...

Creating Blobs with NSwag for multipart form data

The Swagger documentation shows that the endpoint accepts multipart form data and is able to receive form data from a client. However, the TypeScript client generated by NSwag appears to be unusable as it only accepts Blob. uploadDoc(content:Blob): Observ ...

The JSX element 'SubscribeCard' does not contain any construct or call signatures

I'm looking to implement the react-subscribe-card module for handling email subscriptions in my react.js project. Below is the code snippet from my popup.tsx file: import React from "react"; import SubscribeCard from "react-subscribe-c ...

If the internet connection drops, I would like to show an alert notifying me about the status

Can someone provide guidance on how to display an alert message indicating loss of internet connection using AngularJS in my app? I am currently working with the AngularJS Express framework and APIs. When I encounter a situation where the internet connect ...

Display a message following the final ajax request made in AngularJS

I've been attempting to make multiple AJAX calls within a loop. My goal is to display a message only when the final AJAX call is successful. Can anyone provide feedback on what I might be doing incorrectly here? $scope.defer = $q.defer(); ...

I am currently working on creating my website on CloudFlare with the help of React.JS

Struggling with a website build issue while using the Git repo on Cloudflare. Despite attempting various solutions like deleting yarn.lock, running yarn cache clean -all, and then yarn install, I keep encountering the same error. Since I am relatively new ...