如何在 Ionic 4 应用程序中验证 ion-datetime 标签？

Question

我正在使用 Angular 7 构建 Ionic 4 应用程序。为什么 required 在 ion-datetime 标记中不起作用？以下是我的代码：

<ion-item>
        <ion-label>In Time</ion-label>
        <ion-datetime displayFormat="HH:mm" [(ngModel)]="todo.myInTime" required></ion-datetime>
    </ion-item>
    <ion-item>
        <ion-label>Out Time</ion-label>
        <ion-datetime displayFormat="HH:mm" [(ngModel)]="todo.myOutTime" required></ion-datetime>
    </ion-item>
 <ion-button expand="full" (click)="saveTodo()">Save</ion-button>

更新

我正在添加我的 Component.ts 文件。

async saveTodo(){
    const loading = await this.loadingController.create({
      message: 'Saving.. Please Wait!'
    });

    await loading.present();

    if(this.todoId)
    {
      this.todoService.updateTodo(this.todo, this.todoId).then(() => {
        loading.dismiss();
        this.nav.goBack();
      })

    }else{
      this.todoService.addTodo(this.todo).then(() => {
        loading.dismiss();
        // this.nav.navigateBack('home');
        this.router.navigate(['/home']);
      })
    }
  }

Answer 1

您需要使用角度表单控件来显示验证。您可以按以下方式进行。

HTML

<form [formGroup]="myGroup">
  <ion-item>
    <ion-label>Start Time</ion-label>
    <ion-datetime formControlName="datetime" [(ngModel)]="fData. datetime" displayFormat="HH:mm"></ion-datetime>
  </ion-item>
</form>

TS

export class ExamplePage {

  myGroup: FormGroup;
  fData = { "datetime": "" };

  constructor() {

    this.myGroup = new FormGroup({
      datetime: new FormControl('', [Validators.required]),
    });
  }
}

希望这会有所帮助，并查看我的stackblitz demo