在 angular 6 种反应形式中处理电话或时间等数字输入类型？

Question

下面您将看到我的模板/Html 表单，但是，验证器不允许我将输入作为字符串处理？你能解释一下我错过了什么吗？明显的文本输入已得到处理和验证，但我找不到一个示例来说明如何处理电话和时间等数字输入类型。我们可以在某处使用 toString() javascript 方法将它们转换为字符串吗？ HTML 代码示例

<mat-form-field>
  <input matInput type="text" formControlName="title" placeholder="Student Name">
  <mat-error *ngIf="form.get('title').invalid">Please enter a Student Name.</mat-error>
</mat-form-field>
<mat-form-field>
  <input matInput type="tel" formControlName="telephone" placeholder="telephone">
  <mat-error *ngIf="form.get(telephone).invalid">Please enter a telephone.</mat-error>
</mat-form-field>
<mat-form-field>
  <input matInput type="Time" formControlName="pickUpTime" placeholder="PickUp Time">
  <mat-error *ngIf="form.get('pickUpTime').invalid">Please enter a Pickup Time.</mat-error>
</mat-form-field>
<mat-form-field>
  <input matInput type="Time" formControlName="dropOffTime" placeholder="DropOff Time">
  <mat-error *ngIf="form.get('dropOffTime').invalid">Please enter a Dropoff Time.</mat-error>
</mat-form-field>

Component.ts 配置反应形式的文件：

ngOnInit() {
this.form = new FormGroup({
  title: new FormControl(null, {
    validators: [Validators.required, Validators.minLength(3)]
  }),
  telephone: new FormControl(null,{
    validators: [
      Validators.required,
      Validators.minLength(5) ]
  }),
  pickUpTime: new FormControl(null, {
    validators: [
      Validators.required,
      Validators.minLength(5) ]
  }),
  dropOffTime: new FormControl(null, {
    validators: [
      Validators.required,
      Validators.minLength(5) ]
  })

Answer 1

我看不出您无法处理这些输入的原因。真正的问题是有必要将它们解析为字符串吗？我的建议是将这些输入保留在它们的原生类型中，以便以后可以使用它们的功能。也许以下代码示例可以帮助您。

onSubmit(){
   if(this.form.valid){
      let title: string = this.form.get('title').value;
      let telephone: number = this.form.get('title').value;
      let pickUpTime: Date = this.form.get('title').value;
      let dropOffTime: Date = this.form.get('title').value;
      //Do something
   }     
}

在 angular 6 种反应形式中处理电话或时间等数字输入类型？

Handling number input types such as tel or time in angular 6 reactive forms?

forms

reactive-programming

angular

angular-reactive-forms

angular6