时间戳

首页 > 解决方案 > 我们如何在输入字段中添加必填字段，必填标签在其中不起作用？

html - 我们如何在输入字段中添加必填字段，必填标签在其中不起作用？

问题描述

我正在尝试在输入类型中添加必填字段，甚至尝试在输入标签中使用 required 属性，但作业未完成。

我尝试在输入标签中使用 required 属性，但它仍然无法正常工作。

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

我希望所需的属性可以工作，但实际上它不起作用。

标签： htmlangulartextboxoffice-ui-fabric

解决方案

这里举一个简单的例子。请注意无效边框的样式。这些类是由角度设置的。

有关更多信息检查：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>

推荐阅读