"There is no suitable arv-validation-message element to show the ... error of ..."

[askuri]

Hello,

I'm getting this error message in the console immediately after opening my page in the browser:

There is no suitable arv-validation-message element to show the 'required' error of 'description'

Controller:

// ...
import { Validators } from 'angular-reactive-validation';
// ...
addTransactionForm = this.fb.group({
    description: ['', [Validators.required('A description is required')]]
    // ...
});
// ...

Template:

<form [formGroup]="addTransactionForm" (ngSubmit)="onSubmit()">
      <mat-form-field appearance="standard">
        <mat-label>Description</mat-label>
        <input matInput type="text" formControlName="description" required>
      </mat-form-field>
      <arv-validation-messages for="description"></arv-validation-messages>
</form>

I imported the module into my app module.

Adding <arv-validation-message key="required"> tag manually works. But as said in the manual, that's not the point of the library.

I use Angular 11.2.

Thanks in advance.

[davidwalschots]

Could you provide a small example in the form of for example a StackBlitz?

[askuri]

https://stackblitz.com/edit/angular-ivy-yzch5s?file=src/app/app.component.html

I was able to find the problem. Apparently, using the required attribute is the root of the error. Is that a bug, or is it intended that using standard HTML validation requires explicit error messages?

Now I also found out that your library also takes care of highlighting Angular Material inputs in red if there is an error, even without using required attribute. That's quite useful. Hence, the actual problem is solved for me. Still, I think this problem is worth adding to the readme and/or improve the error message.

[davidwalschots]

Thanks for your bug report. Glad you're able to continue.

I overlooked the required attribute on the input. In your example StackBlitz I see you're importing both the FormsModule and ReactiveFormsModule. Theoretically this should cause issues, because now the required validation of the input field is managed by both the reactive validation you set up in your component, as well as by the template-driven form validation provided by the FormsModule. By removing the FormsModule import everything should work well. However, I did so on your StackBlitz and that did not solve the issue. 🤔

Thus, it's something I should look into at some point, as adding the required attribute is still useful from a usability point of view for things like screen readers.

[askuri]

I overlooked the required attribute on the input. In your example StackBlitz I see you're importing both the FormsModule and ReactiveFormsModule. Theoretically this should cause issues, because now the required validation of the input field is managed by both the reactive validation you set up in your component, as well as by the template-driven form validation provided by the FormsModule. By removing the FormsModule import everything should work well. However, I did so on your StackBlitz and that did not solve the issue.

Removing FormsModule in my real app also didn't change anything.

Thus, it's something I should look into at some point, as adding the required attribute is still useful from a usability point of view for things like screen readers.

I agree. Would it be possible that the library even adds such HTML validation attributes by itself so it's not redundant? I think that would be a big win also.

Thanks for your work!