Question

我试图在输入类型中添加必填字段，甚至尝试使用input标签中的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>

我希望所需的属性能够正常工作，但实际上却无法正常工作。

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>

Answer 2

我并不想使事情复杂化，但是由于您使用的是Angular，因此我强烈建议您使用Reactive Forms，它在Angular中是可用的。它具有更大的灵活性，并且可以根据您自己的需求进行自定义。

由于您询问是否要根据需要设置字段，因此可以使用反应式表单来进行设置。请记住将Validators类导入到您的组件中。

import { FormBuilder, Validators } from '@angular/forms';
.
.
newForm =  this.formBuilder.group({
   otp: [null, Validators.required],
   // other necessary fields
})

constructor(private formBuilder: FormBuilder) { }

在您的component.html上，formControlName属性绑定到newForm FormGroup上定义的控件。提交按钮绑定到FormGroup的valid属性。如果未填写otp，则表单的false属性上的值将为valid，因此该按钮将被禁用。

<form [formGroup]="newForm">
  <div>
    <input class="form-control" type="text" placeholder="Enter your OTP" formControlName="otp">
    <div class="form-control-feedback" *ngIf="!newForm.controls['otp'].valid">
    OTP required.
    </div>
  </div>
  . 
  .
  .
  <button [disabled]="!newForm.valid">Submit</button>
</form>

我们如何在必填标记无效的输入字段中添加必填字段？

2 个答案: