角反应形式：如何显示错误+红色边框？

如何解决角反应形式：如何显示错误+红色边框？

我开始使用Angular反应形式。

我真的很喜欢能够有一个异步验证器（对于那些必须对照数据库进行检查的事物），并且我喜欢GUI不需要知道每条规则的想法。

所以我有一个虚拟的登录表单：

  loginForm = this.formBuilder.group({
    email: new FormControl(
      '',Validators.compose([Validators.required,Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])
    ),password: new FormControl(
      '',Validators.minLength(8)]
    )),});

和匹配的视图：

       <form class="ion-margin" [formGroup]="loginForm" (ngSubmit)="login()">
        <ion-item lines="none">
          <ion-label position="floating">Email</ion-label>
          <ion-input type="text" formControlName="email"></ion-input>
        </ion-item>

        <ion-item lines="none">
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password"  formControlName="password"></ion-input>
        </ion-item>

        <ion-row class="ion-margin">
          <ion-button type="submit" color="success" expand="block" [disabled]="loginForm.dirty && !loginForm.valid">Sign in</ion-button>
        </ion-row>
      </form>

目前，我不知道为什么用户无法提交表单。以前，我从事一些ASP.Net Core项目，并且使用相同的方法在ViewModel / Controller端声明模型及其验证规则。

我很期待离子输入知道它的形式控制名称，如果验证失败，至少可以自动添加某种红色边框。正常吗我错过了什么吗？
1. 是否可以通过.ts文件提供错误消息？我的意思是，ViewModel和View必须知道每个错误（及其参数（如minlength））有点奇怪，如果提供一个错误，不是验证器负责吗？
2. 如果我遇到一些全局错误（例如，用户名和密码的组合无效，可以使用表格提供此信息，还是应该在其他地方进行管理？

很抱歉，三个问题合而为一，但这是相同的例子，并且非常接近。

解决方法

我在离子应用程序中处理多个验证消息的方式。

<ion-item>
   <ion-label position="floating">Email</ion-label>
   <ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<div *ngFor="let validation of validation_messages.email">
  <div class="error-message" *ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').touched || loginForm.get('email').dirty)">
    {{ validation.message }}
  </div>
</div>

在Controller文件中，根据您的字段和验证进行配置。

this.validation_messages = {
  'email': [
    { type: 'required',message: 'Email is required' }
  ],'password': [
    { type: 'pattern',message: 'Password does not match pattern' }
  ]
};

此方法将处理单个字段上的多个验证消息。

• 错误边框-如果出现错误，Ionic会在字段底部显示一条红线。尝试从您的lines="none"中删除ion-item
• 全局错误-通过上述设置，您可以在页面底部定义全局错误，只需添加另一个div即可显示来自同一validation_messages的错误。