Primeng: FormControl assigned to p-inputNumber ignores [max]-property when using setValue()

Question

I have a FormControl inside a FormGroup where I can manually type in a value, or it will calculate a value for me depending on other values. I call function inside my ngOnit() that will calculate the value in certain circumstances and will call setValue() on the FormControl.

I have a max value defined for my control, which will not get triggered if setting the value by setValue(). It can happen that the calculation is higher than the max value. In that case, it should use the max value.

Is there a way how i can retrigger the validation or am I just missing something? I know I can just check inside my function if the value is higher than allowed. I am looking for an easier solution. I have also tried triggering updateValueAndValidity() on the control but it did nothing.

<p-inputNumber [formControl]="control"
               mode="currency" currency="EUR"
               [min]="0" [max]="5000"></p-inputNumber>

Answer 1

Update:

Apologies I made a mistake, you are mixing reactive and template driven methods of forms that is the root cause. Please change the template driven method of adding validators [max] and replace it with the reactive method, which is shown below, where we specify the validator as Validators.maxLength(100) for example!

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import { InputTextModule } from 'primeng/inputtext';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [InputTextModule, ReactiveFormsModule, CommonModule],
  template: `
  <form [formGroup]="form">
    <input type="text" pInputText [formControl]="form.controls.input" id="input" name="input"> 
  </form>
  {{
    form.controls.input.errors | json
  }}
  <button (click)="setInputValue()"> set input value</button>
  `,
})
export class App {
  form = new FormGroup<{ input: FormControl<string> }>({
    input: new FormControl<string>('', {
      nonNullable: true,
      validators: [Validators.minLength(0), Validators.maxLength(5)],
    }),
  });
  name = 'Angular';

  setInputValue() {
    const control: FormControl<string> = <FormControl<string>>(
      this.form.get('input')
    );
    control?.setValue('sdfasdfasdfasdfasdf');
  }
}

bootstrapApplication(App);

stackblitz

---

After doing the setValue sometimes it will get missed, for these scenarios, you have the function updateValueAndValidity() this will ensure that the validators are triggered and the error gets shown.

const control = this.form.get('controlName');
control.setValue(5001);
control.updateValueAndValidity();