angularprimengreactive

PrimeNG Angular, year-picker not working as Reactive


am I doing something wrong or is this a bug (middle, year picker not working):

      <!-- Month Control -->
      <input
        type="month"
        view="month" 
        dateFormat="mm" 
      >

      <!-- Year Control -->
      <input
        type="year"
        view="year"
        dateFormat="yy"
      />
      <p-calendar
        view="year"
        dateFormat="yy"
      />

The MONTH control works as a date-picker, the bottom p-calendar year-picker works, but the middle one for year picker does not and only shows as a text-input field.

Is there some specific set of "type" "view", ... etc I am missing that I maybe have not tried yet? Or, is this in fact a bug still/again?

I a thinking the bug-fix 2 years ago only fixed the "formControlName" reactive use with the "p-calendar" for year-picker, not the underlying/complete reactive+yearpicker 'fix' (https://github.com/primefaces/primeng/issues/11223)

--Versions: Angular CLI: 16.2.11 Node: 18.17.1 Package Manager: npm 9.6.7 OS: win32 x64 primeng: 16.9.1

Thanks for advice if I've missed something or confirmation it should be raised as a bug.


Solution

  • I would recommend just using the <p-calendar> as a datepicker.

    If you still want to have a dedicated Input for a year you could use regex patterns to validate the Input like this.

        //.ts
    
        formGroup = new FormGroup({
          year: new FormControl('', {
            validators: Validators.pattern('20[0-2][0-9]'),
          }),
        });
    
        changedValue(): void {
          const yearInput = this.formGroup.get('year');
          const valid: boolean = yearInput?.errors ? false : true;
    
          console.log(valid);
    
          // Do stuff with the input value
        }
    
        //.html
    
        <form [formGroup]="formGroup">
            <input formControlName="year" (change)="changedValue()">
        </form>
    

    This would add an error to the FormControl if the input value isnt a number between 2000 and 2029.