Topic: Autocomplete doesn't function with updateOn: 'submit'
Dave Moniz priority asked 2 years ago
Expected behavior
Allowed to use updateOn: 'submit'
Actual behavior
Not this ^^^ -- it works fine if updateOn
is not set
Dave Moniz priority answered 2 years ago
I think you meant to update a different ticket, your response has nothing to do with the question asked.
It's 2 months old and I no longer work on the affected project so I can't verify if a solution has been provided yet, but you can see this was replicated by @Arkadiusz Idzikowski already.
At no point do you reference autocomplete
in your response. The question is specific to autocomplete
functionality. Where at the time of asking if you specify updateOn: 'submit'
for the formControl
of the autocomplete
then the autocomplete
will not function correctly (does not drop down, populate, etc) but if you leave it unset it is fine.
Arkadiusz Idzikowski staff commented 2 years ago
@Dave Moniz Sorry for the inconvenience, it seems that for some reason I automatically assumed that the reported bug was related to the component input validation (and in fact, such a problem occurs when input is not manually marked as touched, that's why I confirmed bug and added this to our to-do list).
I'm afraid it is not possible to change the behavior of the filter function for different states of the updateOn
option on our end. We need to update the options list accordingly to input value and different updateOn
settings completely change how this value is updated. As a workaround, you could try to call the filter function and update results list on input keyup
event, but in this case input value will be out of sync with underlying form control value.
Dave Moniz priority commented 2 years ago
Interesting, thanks for the information. I had found my own work around for what I needed back then. But we'll leave this here marked as resolved for the next person who gets stuck
Michał Duszak staff answered 2 years ago
I assume your success/error messages are being rendered conditionally like this:
<mdb-error *ngIf="input?.invalid && (input?.dirty || input?.touched)"
>Input value is required</mdb-error
>
<mdb-success *ngIf="input?.valid && (input?.dirty || input?.touched)"
>Looks good!</mdb-success
>
Validation problem with untouched input should be resolved via adding onSubmit method in which markAllAsTouched() should be executed on the FormGroup. Here is an example:
template:
<form [formGroup]="validationFormGroup" (ngSubmit)="onSubmit()">
...
</form>
component.ts:
export class ValidationComponent {
...
onSubmit(): void {
this.submitValidationForm.markAllAsTouched();
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.3.0
- Device: PC
- Browser: Google Chrome
- OS: Arch Linux
- Provided sample code: Yes
- Provided link: No
Arkadiusz Idzikowski staff commented 2 years ago
@Dave Moniz Thank you for reporting this problem. I tested that and I managed to reproduce the incorrect behavior. We will take a closer look at that and let you know what we found.