Ways to return bsDateRangePicker to its default value

I'm currently working on creating reactive forms using Angular 9 and integrating ngx-bootstrap. One issue I am facing is with the daterangepicker functionality. Whenever I utilize the form.reset() function, it clears the input field entirely instead of just resetting it to its default value.

Upon initial page load, the input displays the default value correctly. However, upon reset, it fails to revert back to the default.

Below is a snippet from my HTML file:

<form id="myForm" [formGroup]="myForm" class="form-group p-2">
<div class="input-group ">
<input value="null" type="text" 
       class="form-control" formControlName="dateRange"                                         
       #dp="bsDaterangepicker" bsDaterangepicker 
       [bsConfig]="{ rangeInputFormat : 'DD.MM.YYYY, HH:mm:ss', dateInputFormat: 'DD.MM.YY, 
       HH:mm:ss',showWeekNumbers: false, isAnimated: true, containerClass: 'theme-blue' } ">
</div>
<button type="button" (click)="clearAllForms()" class="btn btn-danger">Clear</button>
</form>

And in the associated TypeScript file:

this.myForm = this.formBuilder.group({
      dateRange: new FormControl([
        new Date(this.currentDate.setDate(this.currentDate.getDate() - 7)),
        new Date()
      ])})

clearAllForms(){
     myForm.reset()
}

Any insights on how to successfully reset it to the default value without clearing the entire field would be greatly appreciated. Thank you!

angulartypescriptngx-bootstrapangular-reactive-forms

Answer №1

Make sure to include the desired default values (such as an array of Date objects) within a map passed into the reset method. The key in the map should correspond to the form control name, while the value should be the desired value for that control.

initializeForms(){
  this.myForm.reset({
    dateRange: [new Date(), new Date()]
  });
}

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

What is the proper way to display the date and time 2021-11-14T18:30:00.000+00:00?

Here is my ts file code: mydate: Date = new Date('2021-11-14T18:30:00.000+00:00'); However, I want the date to be in this format:- 07-July-2022 If anyone can assist with achieving this format, it would be greatly appreciated. Thank you! ...

javascripttypescript

What is the best way to retrieve a specific field from the observable data stream?

When working with observables, I often find myself using them like this: ... const id = 1337; this.service.getThing(id).subscribe( suc => doSomething(suc.name), err = doSomethingElse() ); Lately, I've been utilizing the async pipe more freque ...

angulartypescriptasynchronousobservable

Exploring the Connection with JSON-server

While creating a simulated API using json-server, I encountered an issue with passing a query. When utilizing _expand, I am able to display the parameters of a relationship, but it doesn't seem to work when the relationship is nested within a child. ...

jsonangularjson-server

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

cssangularthemesscss-mixins

Running headless Chrome with Protractor on Windows platform is presenting difficulties

While there is a wealth of documentation available on headless chrome automated testing, information specifically for Windows users seems to be lacking. Furthermore, details on utilizing headless chrome for end-to-end automated testing in a fully develope ...

angularseleniumgoogle-chrome-devtoolse2e-testinggoogle-chrome-headless

What is the best way to eliminate the Mat-form-field-wrapper element from a Mat-form-field component

I have implemented Angular mat-form-field and styled it to appear like a mat-chip. Now, I am looking to remove the outer box (mat-form-field-wrapper). <div class="flex"> <div class="etc"> <mat-chip-list i18n-aria-lab ...

htmlcssangularmat-form-field

The completion of RxJS forkJoin is not guaranteed

After subscribing to getAllSubModules, forkJoin executes all the observables without any errors but fails to complete. Even though forkJoin should only complete after all its observables have completed, I'm seeing '-----' printed 3 times in ...

angularrxjsrxjs5

Using the <head> or <script> tag within my custom AngularJS2 component in ng2

When I first initiate index.html in AngularJS2, the structure looks something like this: <!doctype html> <html> <head> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scal ...

typescriptangular

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Is there a way to combine two kleisli arrows (functions) f: A -> Promise B and g: B -> Promise C into h: A -> Promise C using the library fp-ts? Having experience with Haskell, I would formulate it as: How can I achieve the equivalent of the > ...

typescriptfunctional-programmingfp-ts

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

I am currently developing an application using Angular. I have been attempting to upload a picture to my S3 bucket, but each time I try, I encounter this error in the console. https://i.stack.imgur.com/qn3AD.png Below is the code snippet from my upload.s ...

javascriptangulartypescriptamazon-web-servicesamazon-s3

The application rejected the application of styles from 'http://localhost:1234/node_modules/primeicons/primeicons.css' as the MIME type (text/html) was not compatible

Encountering an error when attempting to add the following styles in index.html within my Angular 6 application. Getting a refusal to apply the style from 'http://localhost:1234/node_modules/primeicons/primeicons.css' because its MIME type ...

angularprimeng

Creating pagination functionality for a React Material table

Check out this Spring Boot endpoint that I use for retrieving items from the database: import React, { useEffect, useState } from "react"; // Additional imports export default function BusinessCustomersTable() { // Functionality and code impl ...

reactjstypescriptspring-bootmaterial-uireact-typescript

Is it possible to verify .0 with regular expressions?

In my project, I have a field that requires whole numbers only. To validate this, I used a regex validation /^\d{1,3}$/ which successfully validates whole number entry and rejects decimal points starting from .1. However, I encountered an issue where ...

htmlangularjsregextypescript

Appending or removing a row in the P-Table will result in updates to the JSON

My task involves implementing CRUD (Create, Read, Update, Delete) functionality for my table. While Create, Read, and Update are working fine with the JSON file, I am struggling to figure out how to delete a specific row in the table without using JQuery o ...

jsonangulartypescriptcrudprimeng

"Trouble with Bootstrap Collapse function - Utilizing ng-bootstrap, eliminating the need for JQuery

In my Angular 8 project, I have Bootstrap 4.3.1 and ng-bootstrap 5.1.1 integrated. As per the ng-bootstrap documentation, including ng-bootstrap in your project eliminates the need to manually add jQuery, as it is encapsulated by ng-bootstrap and not requ ...

angularbootstrap-4ng-bootstrap

Issue with ToggleButtonGroup causing React MUI Collapse to malfunction

I'm having trouble implementing a MUI ToggleButtonGroup with Collapse in React. Initially, it displays correctly, but when I try to hide it by selecting the hide option, nothing happens. Does anyone have any suggestions on what might be causing this ...

reactjstypescriptmaterial-ui

Having difficulty connecting to the router within a container component for Angular2 routing

Presently, my code snippet looks like this: import { Router } from 'angular2/router'; @Component({...}) export class Index { constructor(public router: Router) { this.router.subscribe({...}); } } Although there are additional function ...

angularangular2-routing

What is the reason for the failure of the "keyof" method on this specific generic type within a Proxy object created by a class constructor?

I'm encountering difficulties when utilizing a generic type in combination with keyof inside a Proxy(): The following example code is not functioning and indicates a lack of assignable types: interface SomeDataStructure { name?: string; } class ...

typescripttypescript-generics

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

When using Angular Material stepper, we can easily bind form controls with form groups like [stepControl]="myFormGroup". But how do we bind a FormArray inside a formGroup? Constructor constructor(private _fb: FormBuilder){} FormArray inside For ...

angulartypescriptmaterial-uiangular-material

Passing both the object and its attributes simultaneously for reflect-metadata in TypeScript is a feature that closely resembles functionality found

Instead of using DataAnnotation in C# to add meta attributes on properties, I am seeking a similar functionality in TypeScript for a ldap model class. The goal is to have decorators that can set the LDAP attribute used in the LDAP directory internally. ex ...

c#typescriptreflectionreflect-metadatatypescript-decorator