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

#html #angular #textbox #office-ui-fabric

#HTML #angular #текстовое поле #office-ui-fabric

Вопрос:

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

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

 <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>

  

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

Комментарии:

1. вы можете попробовать с добавлением #otp="ngModel" , а затем проверить

2. angular.io/guide/form-validation#template-driven-validation

Ответ №1:

Вот простой пример. Пожалуйста, обратите внимание на стиль недопустимой границы. Классы были установлены angular.

Для получения дополнительной информации проверьте: 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 amp;amp; (fieldotp.dirty || fieldotp.touched)"
  class="alert alert-danger">
  <div *ngIf="fieldotp.errors.required">
    OTP required.
  </div>
</div>