How to get value typed by keyboard from Angular material-datepicker using Reactive Forms?

Question

I am using Angular and material datepicker with Reactive Forms and moment MomentDateModule. How can I get the value from the form that is typed by the keyboard?

Here is a small example. If I am typing the correct date, then valueChanges is emitted with correct moment object and everything is ok. With invalid date there is null in this.date.value control

Is there a way to store current input value in Form Control with Reactive Forms? I also tried to add (input)="onInput($event)" to datepicker <input />

onInput(event) { this.date.setValue(moment(event.target.value)) }

But it didn't work. Because datepicker converts invalid moment objects to empty strings for the input value

Petr Pokrovskiy · Accepted Answer · 2019-09-02 14:26:03Z

0

If I got you right, you can do it using inputs' value like this.

Your declaration: @ViewChild('input', { static: false }) input: ElementRef

Usage: this.input.nativeElement.value

answered Sep 2, 2019 at 14:26

Petr Pokrovskiy

7557 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mr__brainwash Over a year ago

Yes, I can, but the problem is that I have a dynamic form with different control types. So I can have multiple datepickers on the page with other controls.I am handling their values in the container component with this.form.get(control.key).value. With the described approach,I need: 1) store somewhere in the service current values of all datepickers 2) add if for container component and check there if it is datepicker or not, then get value from the service and transform it to moment object. and so on... I hoped that there is some better way to store invalid dates as moment obj in form

Petr Pokrovskiy Over a year ago

Ok, I understand, then of course it's not an option. What kind of "invalid date" do you need to handle? What kind of input?

mr__brainwash Over a year ago

I have datepicker. User can type there anything he wants. So "my_string" is not a valid date. And if you type "my_string" into mat-datepicker and then try to get the value of the datepicker like this.forms[control.key].value you will get null The main workflow is: 1) user type in the input 2) blur this input 3) input value going to the store from this.forms[control.key].value 4) Then it go back to the datepicker value. As i wrote above in case input value is "my_string" then this.forms[control.key].value === null What we got in this case is empty input after blur

Petr Pokrovskiy Over a year ago

@mr__brainwash sorry for late response. You comment above relates to date adapter issue, material datepicker is using - it's momentjs date adapter by default. Have you tried to override this MomentDateAdapter or maybe create your own one, which is based on momenjs, but maybe storing initial input in some custom field?

Collectives™ on Stack Overflow

How to get value typed by keyboard from Angular material-datepicker using Reactive Forms?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related