Angular 4+ 有序或通用验证消息

Question

我使用响应式表单验证，并且每个输入字段都有几个条件。 我不想一次显示所有错误，我正在寻找一种实现这一点的好方法。目前我的代码如下所示：

<div class="err-msg"
             *ngIf="stbForm.get('firstName').invalid && (stbForm.get('firstName').dirty || stbForm.get('firstName').touched)">
          <ng-container *ngIf="stbForm.get('firstName').hasError('minlength')">
            Name musg have at least {{stbForm.get('firstName').getError('minlength').requiredLength}} characters
          </ng-container>
          <ng-container *ngIf="stbForm.get('firstName').hasError('maxlength')">
            Name must have at most {{stbForm.get('firstName').getError('maxlength').requiredLength}} characters
          </ng-container>
          <ng-container *ngIf="stbForm.get('firstName').hasError('required') ||
              stbForm.get('firstName').hasError('pattern')">
            This field is required
          </ng-container>
        </div>

如果我想实现这一点，我需要为这些 if 添加更多条件并使其变得混乱。有没有更好更简单的方法？

我可以制作自定义指令甚至整个组件，但也许还有其他方式。

我可以为每个字段创建一个变量并从 TS 设置其值，但这需要扩展内置验证器

Answer 1

如果这只是可展示的情况，您可以尝试检查“名字”字段是否为空：

'' == modelForm.value ['image']

<div class = "err-msg"
      * ngIf = "stbForm.get ('firstName'). invalid && (stbForm.get ('firstName'). dirty || stbForm.get ('firstName'). touched)">
      <ng-container * ngIf = "''! = stbForm.value ['firstName'] && stbForm.get ('firstName'). hasError ('minlength')">
        Name musg at least {{stbForm.get ('firstName'). GetError ('minlength'). RequiredLength}} characters
      </ Ng Container>
      <ng-container * ngIf = "''! = stbForm.value ['firstName'] && stbForm.get ('firstName'). hasError ('maxlength')">
        Name must have at most {{stbForm.get ('firstName'). GetError ('maxlength'). RequiredLength}} characters
      </ Ng Container>
      <ng-container * ngIf = "'' == stbForm.value ['firstName'] && stbForm.get ('firstName'). hasError ('required') ||
          stbForm.get ( 'firstName'). hasError ( 'pattern') ">
        This field is required
      </ Ng Container>
 </ Div>

否则你应该使用变量但总是使用带有* ngIf的控件...如果你认为它太长了，代码和解决方案，等待其他人，也许你能更好地建议！ ;-)