Как мы можем добавить обязательное поле в поле ввода, в котором не работает обязательный тег?

Question

Я пытаюсь добавить обязательное поле в тип ввода, даже пытался использовать обязательный атрибут в теге ввода, но задание не выполнено.

Я попытался использовать обязательный атрибут во входном теге, но он все еще не работает.

<input name="otp" (keypress)="onOTPChange($event)"  [(ngModel)]='otp'
                class="ms-TextField-field form-control Login_inputWidth form-control Details_inputWidth"
                required  type="text" value="" id="otp" placeholder="Enter your OTP">
                </div>

Я ожидал, что обязательный атрибут будет работать, но в действительности он не работает.

Answer 1

Вот простой пример.Обратите внимание на стиль для недопустимой границы.Классы были установлены угловыми.

Для получения дополнительной информации проверьте: https://angular.io/guide/form-validation#template-driven-validation

<style>
  .ng-dirty.ng-touched.ng-invalid {
    border: solid 1px red;
  }
</style>
<input  name="fieldotp" 
        [(ngModel)]='otp'
        class="ms-TextField-field form-control Login_inputWidth form-control Details_inputWidth"
        required
        #fieldotp="ngModel"
        type="text"
        placeholder="Enter your OTP">
<div *ngIf="fieldotp.invalid && (fieldotp.dirty || fieldotp.touched)"
  class="alert alert-danger">
  <div *ngIf="fieldotp.errors.required">
    OTP required.
  </div>
</div>