Angular7 反应形式 material 时间输入验证

Question

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

注意：根据我的测试，即使它 none 感知时间条目，但在尝试保存时它不会保存到数据库，并且它可能 sql 不会让这种情况发生。

我用谷歌搜索但找不到任何东西，而且 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>

当用户输入任何没有意义的输入时，我需要某种验证，我的保存 btn 不应被激活。

感谢您的帮助和指导。

Answer 1

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

HTML 与 MatInput:

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

与ngx-mas:

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

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

Angular7 反应形式 material 时间输入验证

Angular7 reactive form material time input validation

asp.net

typescript

angular-material

angular

angular7