InputOtp : the content is not deleted

[mchuc]

Describe the bug

when I want to programmatically change the content of the input, the component does not change - i.e. the letters already entered remain and are not deleted

Environment

mac/ angular 18
chrome (newest)

Reproducer

No response

Angular version

18.2.8

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v22.9.0

Browser(s)

chrome

Steps to reproduce the behavior

run the program
type anything into the form

try to delete it programmatically - code as below

start code:

@ViewChild('otpInput') otpInput!: ElementRef;
odpowiedz: string = "";
...

try this after:

this.otpInput.nativeElement.value = '';
this.odpowiedz = "";
console.log(this.odpowiedz);
this.cd.detectChanges();

html /element

<p-inputOtp #otpInput [(ngModel)]="odpowiedz" [length]="dlugosc_slowa()" [autofocus]="true" pAutoFocus>
     <ng-template pTemplate="input" let-token let-index="index" let-events="events">
       <input
         pInputText
         class="custom-otp-input"
         (input)="events.input($event)"
         (keydown)="events.keydown($event)"
         (keyup)="handleKeyUp($event)"
         type="text"
         [attr.value]="token"
         [ngClass]="{'correct': litera_poprawna(index-1) , 'incorrect': !litera_poprawna(index-1)}"
         [maxLength]="1"
       />


     </ng-template>
   </p-inputOtp>

Expected behavior

currently if I change the word length parameter, a different number of boxes appears, but the boxes are already filled with a value that does not want to be programmatically changed or deleted, regardless of how I do it - as in the above code - summing up:

I want to have a clean, unfilled element and focus in the first box after removing the content from 'odpowiedz'

or add a function - clear()

[wS2Zth]

Hi, you can use ViewChildren to access custom input elements then you can reset them for now.

In HTML
<input #customOtpInputElement pInputText class="custom-otp-input" (input)="events.input($event)" (keydown)="events.keydown($event)" type="text" [attr.value]="token" [maxLength]="1" />

In TS

@ViewChildren('customOtpInputElement') otpCustomInputElements!: QueryList<ElementRef<HTMLInputElement>>;

//Let's say you have a reset function;
resetOtp() {
    this.otpCustomInputElements.forEach((customInput) => {
        customInput.nativeElement.value = '';
    });
}