我正在使用 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']);
})
}
}
最佳答案
您需要使用 Angular 表单控件来显示验证。您可以按照以下步骤进行操作。
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
关于javascript - 如何验证 Ionic 4 应用程序中的 ion-datetime 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54433466/