Question

我正在使用angular5我有一个文件.html包含一个带有2个类型日期输入和输入类型文本的表单。

我实现了一个条件：如果输入dateOne大于dateTwo，则对用户显示错误，他可以提交表单。

一切正常，按钮提交被禁用，但是当我选择dateOne大于dateTwo时，会出现错误消息，并且该按钮不再被禁用。

如果第一次输入且两个日期都不为空，则不再禁用该按钮。它没有考虑我在函数验证（）中所做的条件。

这是File .html

 <div class="modal-content">
  <form [formGroup]="form" (ngSubmit)="addProjecToClients()" >
  <div class="modal-header">
    <h4 class="modal-title">Affectation du projet aux clients</h4>
    <button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">


    <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">Date Two : </label>
      <div class="col-sm-6">
        <input type="date"  [(ngModel)]="dateTwo" formControlName="dateTwo"  class="form-control form-control-sm"
               placeholder=".form-control-sm">

        <span style="color:red" *ngIf="validation()">Date fin doit etre plus grand que date debut .</span>

      </div>
    </div>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
    <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Save changes</button>
  </div>
  </form>
</div><!-- /.modal-content -->

这是File .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;
    }

  }

}

有什么想法吗？

angular5中不再禁用提交按钮

0 个答案: