Question

我建立了反应形式，我需要使用代码中的变量的min和max属性设置输入类型=“ time”，以获取接收时间的最短时间和接收时间的最大时间。 >

（convertimg的代码是将我从服务器获取的时间以字符串形式转换为日期类型）

我尝试使用此代码，但始终允许我一直工作，并允许保存按钮。

我也将min和max属性也放在了Validator中，因为我不知道它如何工作，但是当它仅在Validator中以及仅在HTML上以及当它们同时还在时，它就不起作用这没用。

<input type="time"  formControlName="receiptTime" min="{{minTime | date:'HH:mm:ss'}}" max ="{{maxTime | date :'HH:mm:ss'}}" [class.inputError] = "!receiptTime.valid && ( receiptTime.dirty || receiptTime.touch )">

(minTime = '08:00:00' , maxTime = '21:00:00')

在这里您可以看到我的代码：

import { Component, OnInit } from '@angular/core';

import { FormGroup , FormControl, Validators, AbstractControl } from '@angular/forms';



@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
  orderForm:FormGroup;
 
  minTime:number;
  maxTime:number;

  constructor() {
  let data = {startTime = '08:00' , endTime = '21:00'};
   
        debugger;

        let i;
let minHourNumber:number = 0;
let minMinutesNumber:number = 0;
let hourString:string = data.startTime.substring(0 , 2);
let minuteString:string = data.startTime.substring(3,5);

//convert the hours to number.
for( i =0 ; i<hourString.length ; i++)
{
  minHourNumber *= 10;
  minHourNumber += hourString.charCodeAt(i) - 48;
}

//convert the minutes to number.
for( i =0 ; i<minuteString.length ; i++)
{
  minMinutesNumber *= 10;
  minMinutesNumber += minuteString.charCodeAt(i) - 48;
}



      this.minTime = new Date(new Date().getFullYear() ,new Date().getMonth() ,new Date().getDate() , minHourNumber , minMinutesNumber ).getTime();


//endTime
for( i =0  , hourString = data.endTime.substring(0,2) , minHourNumber = 0; i<hourString.length ; i++)
{
  minHourNumber *= 10;
  minHourNumber += hourString.charCodeAt(i) - 48;
}

//convert the minutes to number.
for( i =0 , minuteString = data.endTime.substring(3,5) , minMinutesNumber = 0  ; i<minuteString.length ; i++)
{
  minMinutesNumber *= 10;
  minMinutesNumber += minuteString.charCodeAt(i) - 48;
}
        this.maxTime= new Date(new Date().getFullYear() ,new Date().getMonth() ,new Date().getDate() , minHourNumber ,minMinutesNumber ).getTime();
      
    this.orderForm = this.createOrderForm();



  }

  ngOnInit() {
   
  }



  createOrderForm():FormGroup
  {
 
        return new FormGroup({

          receiptTime: new FormControl("" , [Validators.required , Validators.min(this.minTime) , Validators.max(this.maxTime) ])
        })
  

  }

  get receiptTime():AbstractControl{
    return this.orderForm.get("receiptTime");
  }





//
  save():void
  {
    debugger;
  alert('good!');
    this.orderForm.reset();
    //this.purchaseSumFromCart = this.httpServ.getSum();

  }
}

<form [formGroup] = "orderForm" (ngSubmit)="save()">
  <br>
  <br>
<label>receipt time: </label>
<input type="time" ng-min="{{ minTime | date: 'HH:mm:ss'}}" formControlName="receiptTime" [class.inputError] = "!receiptTime.valid && ( receiptTime.dirty || receiptTime.touch )">
<br>
<div *ngIf="!receiptTime.valid">
    <div *ngIf="receiptTime.errors.required && (receiptTime.dirty || receiptTime.touch)">
        <label>receipt time is required</label>
      </div>
      <div *ngIf="receiptTime.errors.min"> the time is mot in the opening hours of the store </div>
</div>
 

<input type="submit" value="Save" [disabled]="!orderForm.valid" class="btn btn-primary"/>
</form>

<label *ngIf="receiptTime.errors.min"> receipt time: {{minTime | date:'HH:mm:ss'}}</label>

如何在输入类型=“时间”中使用最小/最大属性

0 个答案: