我们如何在输入字段中添加必填字段，所需的标签在其中不起作用

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>