Как ограничить один di git на круговое текстовое поле в Angular?

Question

Я просто хотел ограничить один di git на круговое текстовое поле. Я не знаю, как этого добиться. Вот мой код шаблона:

<input type="text" id="code1" formControlName="otpcode" class="form-control" style="height:50px; width:50px;border-radius:100%;font-size: 20px;" name="otpcode" placeholder="{{'features.otp.password' | translate}}" [ngClass]="{ 'is-invalid': submitted && form.otpcode.errors }"
/>&nbsp;&nbsp;
<input type="text" id="code2" formControlName="otpcode" class="form-control" style="height:50px; width:50px;border-radius:100%;" name="otpcode" placeholder="{{'features.otp.password' | translate}}" [ngClass]="{ 'is-invalid': submitted && form.otpcode.errors }"
/>&nbsp;&nbsp;
<input type="text" id="code3" formControlName="otpcode" class="form-control" style="height:50px; width:50px;border-radius:100%;" name="otpcode" placeholder="{{'features.otp.password' | translate}}" [ngClass]="{ 'is-invalid': submitted && form.otpcode.errors }"
/>&nbsp;&nbsp;
<input type="text" id="code4" formControlName="otpcode" class="form-control" style="height:50px; width:50px;border-radius:100%;" name="otpcode" placeholder="{{'features.otp.password' | translate}}" [ngClass]="{ 'is-invalid': submitted && form.otpcode.errors }"
/>&nbsp;&nbsp;

Если есть другой способ уточнить этот код с помощью ngModel, дайте мне знать и об этом.

Спасибо

Answer 1

Проще говоря, мне нужно было просто использовать атрибут maxlength и поставить автоматическую вкладку onInputEntry () для обработки требования перемещения курсора в следующее текстовое поле.

<input type="text" id="code1" formControlName="otpcode1"
                                    class="form-control circle circle-with-text mr-2" name="otpcode"
                                    [ngClass]="{ 'is-invalid': submitted && form.otpcode.errors }" maxlength="1"
                                    (input)="onInputEntry($event, code2)" />