Question

我的离子形式不会显示执行输入时是否存在错误。

HTML代码看起来像

<form [formGroup]="LoginForm" (ngSubmit)="loginUser(LoginForm.value)">

<ion-item>
  <ion-label floating >Email</ion-label>
  <ion-input type="email" formControlName="email"></ion-input>
  <div *ngIf="!LoginForm.controls.email.valid && LoginForm.controls.email.dirty">
   Please enter a valid email.
  </div>
</ion-item>

TS文件看起来像

constructor(public navCtrl: NavController, public navParams: NavParams, 
private toast: ToastServiceProvider, private formBuilder: FormBuilder) {

  this.LoginForm = formBuilder.group({
    email: ['', Validators.compose([Validators.minLength(1), Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
    password: ['', Validators.compose([Validators.minLength(6), Validators.required])],
  }) }

有谁能告诉我我做错了什么？

Answer 1

每当ion-item内的内容不符合预期时，您需要将item-content添加到代码中，因此在您的情况下......

<div item-content *ngIf="....">

但你真的不想这样做，因为这会在输入正上方产生错误信息：StackBlitz

相反，我会在您的表单字段下面的另一个ion-item中添加错误消息：

<ion-item no-lines *ngIf="....">
  <p>Please enter a valid email</p>
</ion-item>

这会产生更好的结果： StackBlitz

Answer 2

为每个表单控件添加名称属性。

<ion-input type="email" formControlName="email" name="somename"></ion-input>

Ionic 3 FormControl错误未显示

2 个答案: