Custom Validation is not working in Angular-formly@5.4.3 #2908
Comments
|
I don't see where the issue is, the provided example work as expected. Could you please elaborate? |
|
@aitboudad that is why I'm wondering that why its not working. If the field reaches maximum length its not calling the maxlengthValidationMessage funcation. I'm not getting the custom message which was defined in the maxlengthValidationMessage funcation. Do I need to update any specific version of @ngx-formly/core? |
|
The browser behavior prevents that validator to be triggered ( |
|
So what should I do to trigger that attribute? |
|
Please give me a solution because the client very frustrated it was working fine in a older versions of @ngx-formly/core. |
|
Be patient, there is no bug here + don't rely on us for urgent things. {
key: 'comment',
type: 'textarea',
+ hooks: {
+ afterViewInit(f) {
+ document.getElementById(f.id).setAttribute('maxlength', null);
+ },
+ }
} |
|
@aitboudad Okay I will workaround on this function by tomorrow. Also, FormlyModule.forRoot() should be imported only in the application root module(App Module) or we can import in feature modules as well. Please confirm it. |
that depends on the app requirement but for the most cases should be imported only in the application root module |
|
In v5.10.22 release you can overriding the default build-in html attributes using templateOptions: {
attributes: { maxlength: null }
} |
|
@aitboudad @samtsai @blowsie @Tom-V @dwaldrum Even after updating to the latest version custom validation is not working. I need to show validation error messages for required, max, min, maxLength, minLength. But for basic one required option is not triggering the validation error messages only the input textbox is shown as red border. Note - For these input types I was using PrimeNg Library. I tried to reproduce the issue in stackblitz, there are only minLength option is showing validation message other options like maxLength, max, min are not showing validation messages. In stackblitz, I have created two separate component another-form and second-form with separate module likewise only I have implemented in our application. Because we have number of forms in our application. Refer this stackblitz - https://stackblitz.com/edit/angular-wufd8r?file=src%2Fapp%2Fanother-form%2Fanother-form.component.ts But all the validation error messages were working for the input types - input, textarea, autocomplete and editor of PrimeNg components in Angular 7 version and Formly 4 version. Please refer the screenshots - |
|
Could you provide a reproduction example else no one can help 🙏, the mentioned example https://stackblitz.com/edit/angular-wufd8r is working as expected
|
|
@aitboudad required validation message is working in stackblitz. But it's not showing validation message for maxlength, max, min options. please check the link once again - https://stackblitz.com/edit/angular-wufd8r And sorry for the long essay I can't reproduce the issue but in stackblitz itself some of the maxlength, max, min options are not working. |
|
@Prasanth-FrontEnd maxLength should be maxlength same for min and the like. min/max are for numbers I believe. with that example it looks like it is trying to be applied to a string. I used your stackblitz you linked to replicate and check. |
|
@kenisteward Sorry for the typo..I was talking about the maxLength only. But for the characters we would be using the maxLength and checking whether the entered characters are maximum or not. In the given stackblitz link, maxLength validation error message is not showing as expected. Please check the link - https://stackblitz.com/edit/angular-wufd8r |
|
@Prasanth-FrontEnd in the stackblitz. maxlength is spelled incorrectly. Change "maxLength" to "maxlength" and it works. FYI https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength |
|
No @kenisteward In Angular formly documentation, they had told to use like maxLength only. (L should be capital letter). Please refer this docs - https://formly.dev/examples/validation/validation-message |
|
@Prasanth-FrontEnd i am now confused on what the problem is. If you define it as maxLength. it properly does not allow the user to enter more than 5 characters as you see here the validation message never fires because more than 5 characters are not allowed (even if you use copy/paste) Event if you use lower case maxlength it doesn't show up because no more than 5 characters are allowed. what are you expecting to happen? |
|
@kenisteward I was expecting to show validation error messages to the user. In Angular 7 version and Angular formly 4 version maxLength option allows the user to enter any number of characters but if it reaches maximum length means it will trigger the validation function and shows the error message before in Angular 7 version and Angular formly 4 version. Please refer the below screenshots it was taken in Angular 7 version and Angular formly 4 version -
Currently, I'm using the Angular 9.1.13 version and Angular formly 5.10.22 version but here it's not working as expected. |
|
This has since been fixed to be consistent with the base validation for the
web. If you want this functionality either use the old version or make a
specific validator that allows that.
…On Thu, Jul 15, 2021, 3:45 PM Prasanth-FrontEnd ***@***.***> wrote:
@kenisteward <https://github.com/kenisteward> I was expecting to show
validation error messages to the user. In Angular 7 version and Angular
formly 4 version maxLength option allows the user to enter any number of
characters but if it reaches maximum length means it will trigger the
validation function and shows the error message before in Angular 7 version
and Angular formly 4 version.
Please refer the below screenshots it was taken in Angular 7 version and
Angular formly 4 version -
[image: textarea]
<https://user-images.githubusercontent.com/83607976/125854853-11b06857-04f5-454b-a0c6-5627edcfe4ec.png>
[image: input]
<https://user-images.githubusercontent.com/83607976/125854860-aff1c9c7-101d-4aa2-a272-54f01030461e.png>
[image: Editor]
<https://user-images.githubusercontent.com/83607976/125854862-f345d448-d26d-4be6-99e7-cd32d158bbfe.png>
[image: autocomplete]
<https://user-images.githubusercontent.com/83607976/125854864-10d1396c-1e87-4a0b-8d5e-18397993e442.png>
Currently, I'm using the Angular 9.1.13 version and Angular formly 5.10.22
version but here it's not working as expected.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#2908 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADB4XNLJTFCLD3PGLB4JYFLTX5CFVANCNFSM47WVDYLQ>
.
|
|
I believe there were underlying fixes to angular that changed this but I
would have to check on that. Either way the new way is a much better user
experience because they can never enter bad data
On Thu, Jul 15, 2021, 3:47 PM Kenneth Steward ***@***.***>
wrote:
… This has since been fixed to be consistent with the base validation for
the web. If you want this functionality either use the old version or make
a specific validator that allows that.
On Thu, Jul 15, 2021, 3:45 PM Prasanth-FrontEnd ***@***.***>
wrote:
> @kenisteward <https://github.com/kenisteward> I was expecting to show
> validation error messages to the user. In Angular 7 version and Angular
> formly 4 version maxLength option allows the user to enter any number of
> characters but if it reaches maximum length means it will trigger the
> validation function and shows the error message before in Angular 7 version
> and Angular formly 4 version.
>
> Please refer the below screenshots it was taken in Angular 7 version and
> Angular formly 4 version -
>
> [image: textarea]
> <https://user-images.githubusercontent.com/83607976/125854853-11b06857-04f5-454b-a0c6-5627edcfe4ec.png>
> [image: input]
> <https://user-images.githubusercontent.com/83607976/125854860-aff1c9c7-101d-4aa2-a272-54f01030461e.png>
> [image: Editor]
> <https://user-images.githubusercontent.com/83607976/125854862-f345d448-d26d-4be6-99e7-cd32d158bbfe.png>
> [image: autocomplete]
> <https://user-images.githubusercontent.com/83607976/125854864-10d1396c-1e87-4a0b-8d5e-18397993e442.png>
>
> Currently, I'm using the Angular 9.1.13 version and Angular formly
> 5.10.22 version but here it's not working as expected.
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#2908 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/ADB4XNLJTFCLD3PGLB4JYFLTX5CFVANCNFSM47WVDYLQ>
> .
>
|
@kenisteward I can't use the older version of Angular Formly because the Angular 9 version is only supported for Angular Formly 5.x.x version. Even using specific validator it's not working as expected. Because I have done all the workaround whichever is possible provided by the Angular formly documentation. |
@kenisteward In that case, if there is underlying fixes in angular means please have a look on that. Because in my application it's allowing the number of characters to enter by the user even after it reaches the maxLength but the field shows as red border. User don't know why the red border is showing. I think Angular update version were underlying some fixes to make this work as expected. |
|
Ahhh now that's a real problem. Yeah if you can figure out what is different between the stackblitz and your local env we can help. Otherwise if we can't replicate it in the stackblitz we can't find what is breaking. |
|
Okay @kenisteward I will try to reproduce the issue in stackblitz. |
Don't @ me, thank you |
`{
key: 'description',
type: 'input',
wrappers: ['form-field-horizontal'],
templateOptions: {
label: 'Description',
maxLength : 3000,
},
},
In NgModule:
export function maxlengthValidationMessage(err, field) {
return
This field has a maximum length of ${field.templateOptions.maxLength} characters. Please shorten this text to fit under this length.;}
FormlyModule.forRoot({
wrappers: [{ name: 'form-field-horizontal', component: FormlyHorizontalWrapperComponent }],
validationMessages: [
{ name: 'required', message: 'This field is required' },
{ name: 'maxlength', message: maxlengthValidationMessage },
],
types: [{
name: 'input', component: FormlyFieldCustomInput
}]
}),`
To reproduce this issue:
It was working fine before in Angular 7 and @ngx-formly/core - 4 verison but now I have updated to Angular 9 and @ngx-formly/core - 5 version currently not working.
maxlengthValidationMessage is not calling and not returning the message.
Also I have more than 150 fields in a form so I can't use validation in each and every fields that is why I'm using like this stackblitz - https://stackblitz.com/angular/njpgnaejdqr?file=src%2Fapp%2Fapp.component.ts
Please help me out.
The text was updated successfully, but these errors were encountered: