angular - 如何在Ionic 3中以表格形式显示错误消息

Question

在这里，我尝试在forms中的Ionic-3中显示错误消息。
这是我的email.html文件：

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls.email.errors && form.controls.email.dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>

在我的email.ts文件中，我有：

export class EmailSignupPage {

   form : FormGroup;

   constructor(
       private formBuilder: FormBuilder,
       public navCtrl: NavController,
       public navParams: NavParams,
   ) {
       this.form = this.formBuilder.group({
        email: ['', Validators.compose([Validators.required, Validators.email])]
       });
   }

   ionViewDidLoad() {

   }

   next() {
       this.navCtrl.push(CredentialPage);
   }

   cancel() {
       this.navCtrl.popToRoot();
   }
}

我认为我的代码在email.ts文件中很好，但是我不知道如何在表单验证时显示错误，因为我对ioic和angular还不熟悉！
有人能帮我吗？
谢谢！

Answer 1

我不知道如何在表单验证时显示错误
如果您只想在某些地方显示错误，*ngIf指令就是您想要的。将错误消息放在所需的任何位置，并添加*ngIf以指示在哪些情况下应显示该消息。
<p *ngIf="emailIsCorrect">error message: incorrect email</p>的基本思想是在类中（在.ts文件中）有一个属性，您将更新该属性以反映消息是否应该出现。主要思想是在ts文件中使用方法来执行检查/验证并更新emailIsCorrect属性。
例如，当用户按下键时，可以使用(keypress)="performCheckOnKeyPress($event.keyCode)"中的<ion-input ...>属性调用验证方法。
更多解释见下文。
执行自定义检查和验证
我试图在forms的Ionic-3中显示错误消息。
有几种选择：
有条件地显示内容/错误消息：
Angular2 *ngIf directive将根据.ts文件中变量的状态隐藏内容。
*ngIf的工作方式类似于javascript。未定义或错误的if将不会显示内容。查看文档中的用例示例。
执行自定义验证：您可以选择向.ts文件中的类添加额外的属性和方法，并使用*ngIf="myVar"有条件地显示内容。
还可以使用javascript检查：
禁用选项（正如在代码中使用if (myVar){}所做的那样）
使用三值检查设置文本或css类之类的内容。您也可以使用方法调用，如myVar，其中*ngIf。
当某些事件发生时，使用标记上的属性执行自定义检查（就像使用javascript<button [disabled]=""...>=>{{variable ? 'basic-class':'error-class' }}，<p>{{ foo() }}</p>=>foo(){ return "some text"; }，…）。
如果您将所有错误消息存储在一个变量中，并希望将它们显示在一个类似于onclick的位置（当电子邮件和密码字段都未通过验证时），则可以使用(click)=""。
您可能还想看看angular2onkeypress directive和doc中提供的示例。事实上，当您使用(keypress)=""时，会对电子邮件和其他组件进行基本验证，<span>Please correct the following fields **email** and **password**</span>会自动更新您在.ts文件中声明的变量<span>{{ errorMessagesVariable }}</span>的字段。
上述元素可能无法反映某些用例的最佳实践。这是因为你对离子结构的了解。
实例：
例如，以下三元系是离子显影的良好实践：

<ion-label color="{{ form.controls.email.errors && form.controls.email.dirty ? 'danger' : 'primary' }}" floating> Email </ion-label>

处理按键事件：

<ion-input [formControl]="form.controls['email']" (keypress)="performCheckOnKeyPress($event.keyCode)"></ion-input>.

代码中有错误
HTML问题：
您的代码中有一个错误，使其无论是否有效都被发送。
当您在表单中放置ngModel时，按下该按钮将触发为表单提供的表单提交方法（<form [formGroup] ...>）。在这种情况下，按formGroup按钮也会提交表单。
解决方法：如果您希望“取消”和“下一步”按钮相邻，您可能希望将它们都移到form: FormGroup;标记之外。
注意，通过将next按钮移到表单之外，它将不再提交表单（它将只调用<button>方法）。
如果希望“下一步”按钮在<form (submit)="signIn()" ...>之外提交表单，则单击该按钮时还应调用CANCEL方法。即<form>...</form>。
注意：您可以为next()和其他角度指令属性编写非常简单的javascript（也适用于<form>）。尽管javascript有一些限制，但是只要试试js代码就可以了……
Ionic v1开发者注意事项
离子1使用角1。离子v2/v3使用角2。
角度2中引入的变化：
signIn()，(click)="next(); signIn()"替换了(click)="..."和*ngIf="..."。
(keypress)=""，(click)=""替换为ng-keypress=""和ng-click=""