代码之家 › 专栏 › 技术社区 › Abhijit Mondal Abhi

如何在Ionic 4应用程序中验证Ionic datetime标记?

ionic-framework angular javascript

Abhijit Mondal Abhi · 技术社区 · 7 年前

我正在用Angular 7构建Ionic 4应用程序。为什么? 不适用于标签下面是我的代码:

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

1 回复 | 直到 7 年前

Sudarshana Dayananda 7 年前

您需要使用角度窗体控件来显示验证。你可以按下面的方法做。

<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>

export class ExamplePage {

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

  constructor() {

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

stackblitz demo