angular material custom control that displays errors also when the form is submitted

Question

I have an issue with a custom material input I created. It's a country-autocomplete input which implements MatFormFieldControl and ControlValueAccessor. The value it should reflect to the outer form is the ID of the country.

The problem is that when I place it inside a , if there are errors, they are not displayed when the user submits the form.

https://stackblitz.com/edit/angular-fxu8rz?file=src/app/form-field-custom-control-example.html

Did anybody have this kind of scenario?

Answer 1

This is how I solved it (may be a bit hacky and i'm opened for better solutions):

I Injected the formGroupDirective to the component, and I am now checking if the form is submitted also. That made the red border appear, but still no error messages for some reason. The second thing i did (and that's what I don't like this solution sdo much) is to add an updateValueAndValidity() whenever in side the errorState function.

That's the updated stackblitz:

https://stackblitz.com/edit/angular-fxu8rz-vcqtsd?fbclid=IwAR0yJtsxcHZal7_ZHPERQr8Prcxz5QqoEh78qEEIXRXtwPyNFec3qiKrZxk&file=src%2Fapp%2Fcountry-input%2Fcountry-input.component.ts