как я могу решить логику диапазона дат

Question

Извините за мой английский. Я новичок в ionic и пытался создать приложение Todo с ionic 4. Для Todoes я настраиваю startDate и EndDate, но я хочу контролировать диапазон дат, не давая пользователю выбрать начальную дату, онне сможет выбрать endDate, который предшествует StartingDate

ошибка, которую я получил "NewTodoPage.html: 40 Ошибка: ошибка: не удается найти элемент управления с именем: '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>

Answer 1

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'))
      });
    });

  }

}

Answer 2

Поскольку вы используете formControlName со входами, я предполагаю, что вы также знаете, как использовать файл ts. поэтому измените значение [min] второго средства выбора даты на значение первого средства выбора, чтобы для дат минимальной даты было установлено значение, выбранное для даты начала,

 <ion-col size-sm="6" offset-sm="3">
    <ion-item>
      <ion-label position="floating"> Ending at : </ion-label>
      <ion-datetime 
      [min]="dateFrom" 
      displayFormat=" DD MMM YYYY "
      formControlName="DateTo"></ion-datetime>
    </ion-item>
  </ion-col>

И ошибка, которую вы получаете, связанная с объявлением даты от ts, пожалуйста, проверьте это или поделитесь с нами