Angular display error message from reactive form in html template

Question

Is it possible to display validators error message inside html template I have something like this

this.formBuilder.group({
 sizeOfBuildingPart: [{ value: 0, disabled:false }, [Validators.min(0),Validators.max(100), Validators.required, Validators.pattern('[0-9]*$')]]});

In html template I need to display error message if max value is bigger then validators

Something like this

 {{formControls.sizeOfBuildingPart.errors?.max}}

It is working ok, but is it possible to display what is max number value (in this case 100), tried something like this

{{formControls.sizeOfBuildingPart.errors?.max.value}}

But it does not work, thanks in advance

You need to check the documentation. If error, It returns nul, if not it retuns an object which has max and actualproperties, so you need to reach it like formControls.sizeOfBuildingPart.errors?.max.max or formControls.sizeOfBuildingPart.errors?.max.actual — nevzatopcu
– nevzatopcu, Commented Jun 4, 2021 at 13:42
formControls.sizeOfBuildingPart.errors?.max.max , thanks, can you write an answer that I can accept — Miomir Dancevic
– Miomir Dancevic, Commented Jun 4, 2021 at 13:46

Devang Patel · Accepted Answer · 2021-06-04 13:52:53Z

2

You need to use : (form.controls['sizeOfBuildingPart'].errors?.max?.max) That will return you max number provided in validations.

Here is working demo for it: stackblitz

answered Jun 4, 2021 at 13:52

Devang Patel

1,8638 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular display error message from reactive form in html template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related