以角度 6 反应形式处理数字输入类型，例如电话或时间？答案

【问题标题】：Handling number input types such as tel or time in angular 6 reactive forms?以角度 6 反应形式处理数字输入类型，例如电话或时间？
【发布时间】：2018-11-03 21:51:22
【问题描述】：

您将在下面看到我的模板/ 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) ]
  })

【问题讨论】：

标签： angular forms angular6 reactive-programming angular-reactive-forms

【解决方案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
   }     
}

【讨论】：