Question

我有一个角7反应形式，此形式的输入字段是让用户查看和修改时间，然后使用Save（）将其保存回我们的数据库，问题是用户可以在此输入任何无意义的数字在时间方面没有意义的字段（例如小时应为1-24，分钟为1-60）我的问题是如何验证在时间字段中输入了哪些用户，如果该用户有效，则使Save btn处于活动状态？

注意：根据我的测试，即使它没有时间输入，但在尝试将其不保存到db时保存，并且可能是sql不允许这样做。

我用google搜索，但找不到任何东西，angular也只有电子邮件验证器，您可以在定义表单时将其放入。

这是我的表格定义

timeForm: FormGroup = new FormGroup({
    Id: new FormControl(''),
    Time: new FormControl(''),
  });

这是我的HTML方面

<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
  <mat-grid-list cols="1" rowHeight="120px">
    <mat-grid-tile>
      <div class="form-controles-container">
        <input type="hidden" formControlName="Id" />
        <mat-form-field>
          <input formControlName="Time" matInput placeholder="Time" />
        </mat-form-field>
        <div class="button-row">
          <button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
          <button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</form>

当用户打入任何在时间上没有意义的输入时，我需要某种形式的验证。

感谢您的帮助和指导。

Answer 1

您可以使用HTML type="time"，或者如果需要更多内容，则可以简单地使用类似在Github上找到的JsDaddy/ngx-mask库。像这样使用它：

带有MatInput的HTML：

<input formControlName="Time" matInput placeholder="Time" type="time" />

使用ngx-mas：

<input formControlName="Time" matInput placeholder="Time" mask="Hh:m0" />

在所有输入时间类型用例中添加type="time"总是有帮助的。

Angular7反应形式物料时间输入验证

1 个答案: