Button type "reset" and form reset() method yield different results in inputs and date inputs

[dtopalov]

When a MaskedTextBox or a DateInput are used inside of a form, clicking a <button type="reset">reset</button> and using the ngForm's reset() method yield different results:

http://plnkr.co/edit/MmiKi6DGUE6yJCGYwqch?p=preview

Using the method works as expected, but using the button type "reset" or DOM form.reset() clears the internal HTML input's value.

It would be nice to provide a consistent experience regardless of whether the button or the form method is used.

[ggkrustev]

The cleanest solution here will be to use input.defaultValue control property to utilize built-in DOM Form control support. Otherwise, we will need to tick inside the ControlValueAccessor.writeValue method to wait for the DOM Form to reset its internals first.

[ggkrustev]

Our thorough investigation on the subject has shown that the browser indeed clears the input value after the Angular form has reset the components/directives. This seems incorrect in Angular form context and even unnecessary.

The best solution in this case is just to prevent the default form reset event and leave the Angular form to reset its content. Check this working example.

https://stackblitz.com/edit/angular-b3hyue

Will close the thread with this workaround, as we cannot do much on our side.