【问题标题】:How to make comparison between two dates in angular5?如何在角度 5 中比较两个日期?
【发布时间】:2018-05-29 17:54:03
【问题描述】:

如果第二个日期输入大于第一个日期输入,我正在尝试在 angular5 中不验证表单,然后显示错误消息,以便用户可以更改日期。

这是 .html 文件:

    <div class="modal-body">
    <form [formGroup]="form" (ngSubmit)="addProjecToClients()">
        <div class="form-group row">
          <label class="col-sm-5 col-form-label">Choisir un client : </label>


          <div class="col-sm-6">

            <ng-select  *ngIf="_listClients"
                         [items]="_listClients"
                          bindLabel ="nom"
                          bindValue ="id"
                        [(ngModel)]="selectedPersonId"
                        formControlName="selectedPersonId"
                         >
            </ng-select>

          </div>
        </div>

        <label class="col-sm-5 col-form-label">Information liées au contrat : </label>
        <div class="form-group row">
          <label class="col-sm-5 col-form-label" >Date one :  </label>
          <div class="col-sm-6">
            <input type="date" class="form-control form-control-sm"
                   placeholder=".form-control-sm"  [(ngModel)]="dateOne"
formControlName="dateOne">
          </div>
        </div>

        <div class="form-group row">
          <label class="col-sm-5 col-form-label" for="input-small">Date two : </label>
          <div class="col-sm-6">
            <input type="date" id="input-small" name="input-small" class="form-control form-control-sm"
                   placeholder=".form-control-sm"  [(ngModel)]="dateTwo" 
    formControlName="dateTwo">

 <span style="color:red" *ngIf="validation()">DateTwo must be gt than dateone</span>

          </div>
        </div>
      </div>

     <button type="submit" class="btn btn-primary"  [disabled]="!form.valid" >Save changes</button>

</form>

这是 .ts 文件:

 export class ProjectsComponent implements OnInit {

    dateOne:new Date() ;
    dateTwo:new Date(); 

     ngOnInit() {

    this.doSearch();
    this.dateOne= null;
    this.dateTwo= null;

 this.form = this.formBuilder.group({
      dateOne: ['', Validators.required],
      dateTwo: ['', Validators.required],
       selectedPersonId: ['', Validators.required]
    });

}

validation(){
    if(this.dateOne && this.dateTwo){
      if(this.dateOne.getTime() < this.dateTwo.getTime()){
        return false;
      }
      else
        return true;
    }

      }

    }

有人建议我使用自定义验证器,但我找不到完整的简单示例。

任何帮助:) ?

【问题讨论】:

  • 如果您正在寻找有关自定义验证器的信息,这可能会有所帮助 scotch.io/tutorials/…
  • 感谢您提供此链接,我一定会阅读的:)。

标签: angular angular5 custom-validators


【解决方案1】:

尝试使用此代码getTime() 以毫秒为单位进行比较。

if(dateOne.getTime() > dateTwo.getTime())

【讨论】:

  • 您好,感谢您的回答,我该如何显示错误消息?我需要自定义验证器吗?
  • 错误信息在哪里?你想在哪里展示?
  • 让我向您解释一下:我想要两种情况,1)-当 dateOne>dateTwo 时,用户可以提交,2)-当 dateOne
  • 好吧,其实 Angular 有 FormBuilder from Angular/forms 看看,因为它更容易使用,但如果你不想使用,你必须添加一个简单的
    和提交操作。但是要显示错误,您必须在此函数 addProjecToClients() 中进行验证,并在 html 文档中显示错误
  • 是的,让我同时构建它修改您的帖子或将此功能添加到您的帖子中
猜你喜欢
  • 1970-01-01
  • 2018-12-30
  • 2011-01-13
  • 2011-02-22
  • 2021-08-17
  • 2011-04-20
  • 1970-01-01
相关资源
最近更新 更多