Question

请问我的英语我是ionic的新手，正尝试使用ionic 4制作Todo应用程序。对于Todoes，我设置了startingDate和EndDate，但是我想通过在选择开始日期后阻止用户来控制日期范围，因此他将无法选择StartingDate之前的endDate

我得到的错误“ 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

在您将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中声明dateFrom相关的错误，请检查该错误或与我们分享

Answer 2

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

  }

}

我该如何解决日期范围逻辑

2 个答案: