Value is not getting filled for <ng-otp-input> through formControlName

Question

I have used ng-otp-input in my code with formcontrolname but Value is not getting fetched. It is getting filled for other formcontrolname in the sameformgroup. Is there anything else I need to do for type of input?

<form [formGroup]="usernameForm" >
    <label class="form-labels">Mobile Number (Username)</label>                       
    <mat-form-field class="form-fields">                  
        <input formControlName="mobileno"  type="number" matInput>
    </mat-form-field>
                      
    <div class="hint-text">The Mobile number should belong to you and can be used only once to create a account and username.</div>  
    <div *ngIf="generateOtpFlag">
        <label class="form-labels">Mobile OTP</label> 
        <ng-otp-input formControlName="mobileotp" [config]="config"></ng-otp-input>
        <div class="timer-class">
            <div *ngIf="timer > 0">
                Resend OTP in 00 : {{timer}}
            </div>
            <div class="resendOTP" (click)="generateOtp()" *ngIf="timer <= 0">
                Resend OTP
            </div>
        </div>
    </div>
    <button class="btn btn-primary btn-lg generateOtp-btn" (click)='generateOtpFlag ? verifyMobile() : generateOtp()'>{{generateOtpFlag ? 'Verify & Continue': 'Generate OTP'}}</button>
</form>   

Answer 1

From their source code and documentation, we can see that they don't implement the ControlValueAccessor interface, which is the interface that allows Angular Forms to use the FormControl class. Instead, they have their own mechanism, on which you supply the FormControl through an input.

Bellow there is an example taken from their documentation.

<ng-otp-input [formCtrl]="YourFormControl" [config]="{length:5}"></ng-otp-input>