时间戳

首页 > 解决方案 > 我如何解决日期范围逻辑

ionic-framework - 我如何解决日期范围逻辑

问题描述

对不起，我的英语是 ionic 新手，正在尝试使用 ionic 4 制作 Todo 应用程序。对于 Todoes，我设置了 startDate 和 EndDate 但我想通过在选择开始日期后阻止用户来控制日期范围，他不会能够选择在开始日期之前的结束日期

我得到的错误“NewTodoPage.html:40 ERROR Error: Cannot find control with name: 'dateFrom'”

<ion-content>


<ion-row>
  <ion-col size-sm="6" offset-sm="3">
    <ion-item>
      <ion-label position="floating">Title: </ion-label>
      <ion-input type="text" autocomplete autocorrect formControlName="title"></ion-input>
    </ion-item>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col size-sm="6" offset-sm="3">
    <ion-item>
      <ion-label position="floating">Description: </ion-label>
      <ion-textarea rows="4" formControlName="description"></ion-textarea>
    </ion-item>
  </ion-col>
</ion-row>


  <ion-row>
  <ion-col size-sm="6" offset-sm="3">
    <ion-item>
      <ion-label position="floating">Starting at: </ion-label>
      <ion-datetime 
      [min]="newTodo.dateFrom.toISOString()" 
      displayFormat=" DD MMM YYYY" 
      formControlName="dateFrom"
      #startDateCtrl></ion-datetime>
    </ion-item>
  </ion-col>
  <ion-col size-sm="6" offset-sm="3">
    <ion-item>
      <ion-label position="floating"> Ending at : </ion-label>
      <ion-datetime 
      [min]="startDateCtrl.value" 
      displayFormat=" DD MMM YYYY "
      formControlName="dateTo"></ion-datetime>
    </ion-item>
  </ion-col>
</ion-row>

标签： ionic-framework

解决方案

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { TacheService } from '../tache.service';
import { Router } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import { Tache } from '../tache.model';



@Component({
  selector: 'app-new-todo',
  templateUrl: './new-todo.page.html',
  styleUrls: ['./new-todo.page.scss'],
})
export class NewTodoPage implements OnInit {
    form: FormGroup;
    newTodo: Tache;
  constructor(
    private tacheService: TacheService,
    private router: Router,
    private loaderCtrl: LoadingController) { }

  ngOnInit() {
    // add formGroup that takes a javascript object
    this.form = new FormGroup({
         title: new FormControl(null, {
           updateOn: 'blur',
           validators: [Validators.required]
         }),
         description: new FormControl(null, {
          updateOn: 'blur',
           validators: [Validators.required, Validators.maxLength(500)]
         }),
         dateFrom: new FormControl(null, {
          updateOn: 'blur',
           validators: [Validators.required]
         }),
         dateTo: new FormControl(null, {
           updateOn: 'blur',
           validators: [Validators.required]
         })
    });
  }

  getDummyDate() {
    return new Date();
  }

  onCreateTodo() {
    if (!this.form.valid) {
      return;
    }
    this.loaderCtrl.create(
      {message: 'Creation en cour ...'}
    ).then(loadingEl => {
      loadingEl.present();
      this.tacheService.addTache(
      this.form.value.title,
      this.form.value.description,
      new Date(this.form.value.dateFrom),
      new Date(this.form.value.dateTo)
      )
      .subscribe(() => {
        loadingEl.dismiss();
        this.form.reset();
        this.router.navigate(['/tache/tabs/todo']);
        // console.log('Ajout d\'un nouveau Todo'))
      });
    });

  }

}

推荐阅读