angular / angular/components

help(mat-date-range-picker): Getting date range values from Reactive FormGroup

Open
#22,158 7 comments 0 reactions 0 assignees View on GitHub
area: material/datepicker forms P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What are you trying to do?

I would like to use the date range picker in a reactive form and emit an event when the FormGroup's value changes.

I'm subscribing to the valueChanges Observable on the FormGroup and emitting an event when a value changes.

#### What troubleshooting steps have you tried?

I am seeing many events being emitted when the FormGroup is initialized (4x). And when the form control's value is modified at runtime via button click there are even more events emitted.

Is a way to filter down the valueChange events coming from the FormGroup? I realize I could filter the values coming through the valueChange Observable but I'm not sure how to know which value is the one I'm after.

#### Reproduction
https://stackblitz.com/edit/date-time-picker-reactive-form?file=src/app/date-range-picker.ts

#### Environment

- Angular: 10.2.4
- CDK/Material: 10.2.7
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially src/app/date-range-picker.ts, and trace the mat-date-range-picker FormGroup valueChanges subscription during initialization and button updates. Confirm whether the repeated emissions are an Angular Material bug or expected reactive-form behavior; the issue does not specify a concrete code change or test for completion.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.