如何防止在 Angular html 中显示多个错误消息？答案

【问题标题】：How to prevent multiple error message getting displayed in the angular html?如何防止在 Angular html 中显示多个错误消息？
【发布时间】：2019-02-01 10:39:22
【问题描述】：

您好，以下是我的 Angular html 文件中的一个 sn-p 代码。我正在尝试使用ngif 和ng-container 来实现 if elseif(condition) elseif(condition)。

我想要实现的是只有一个代码块应该打印错误。换句话说，我不想打印两条错误消息。我不知道为什么我的代码不起作用。

例如，目前如果 formGroup.hasError('invalidPasswordStrength') 和 formGroup.hasError('blacklistedPassword') 为 true，它会打印两条错误消息。

我期望的是，如果它们都是真的，我想打印与 formGroup.hasError('invalidPasswordStrength') 相关的错误消息。

例如，我尝试过这样的选项：

*ngIf="formGroup.hasError('passwordConfirmation') && !(formGroup.hasError('invalidPasswordStrength') || formGroup.hasError('blacklistedPassword'))。

有效，但不干净

<ng-container *ngIf="formGroup.hasError('passwordConfirmation'); else second">
          <alert type="danger" dismissable="false">
            {{ 'VALIDATION.ERRORS.MATCHING_PASSWORDS' | translate }}
          </alert>
        </ng-container>

        <ng-container #second *ngIf="formGroup.hasError('invalidPasswordStrength'); else third">
          <alert type="danger" dismissable="false">
            {{ 'VALIDATION.ERRORS.PASSWORD_STRENGTH_INVALID' | translate }}
          </alert>
        </ng-container>

        <ng-container #third *ngIf="formGroup.hasError('blacklistedPassword'); else fourth">
          <alert type="danger" dismissable="false">
            {{ 'VALIDATION.ERRORS.PASSWORD_NOT_PERMITTED' | translate }}
          </alert>
        </ng-container>

        <ng-container #fourth *ngIf="formGroup.hasError('passwordMatchingUserDetails')">
          <alert type="danger" dismissable="false" >
            {{ 'VALIDATION.ERRORS.PASSWORD_MATCHING_USER_DETAILS' | translate }}
          </alert>
        </ng-container>

【问题讨论】：

标签： angular typescript angularjs-scope angular-directive

【解决方案1】：

移除 ngcontainers 并尝试使用这种方法。

你可以用我这里用的代替。

                      <div
                        *ngIf="aaaServerForm.get('proxy_passphrase').invalid && (aaaServerForm.get('proxy_passphrase').dirty || aaaServerForm.get('proxy_passphrase').touched)">

                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors['required']">Passphrase is required.
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.minlength && !aaaServerForm.get('proxy_passphrase').errors.spaceatstart && !aaaServerForm.get('proxy_passphrase').errors.spaceatend && !aaaServerForm.get('proxy_passphrase').errors.specialatstart && !aaaServerForm.get('proxy_passphrase').errors.specialatend && !aaaServerForm.get('proxy_passphrase').errors.twospace">
                          Minimum 8 character
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.maxlength">
                          Maximum 64 character allowed
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.spaceatstart && !aaaServerForm.get('proxy_passphrase').errors.spaceatend">
                          Should not start with a space!
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.spaceatend && !aaaServerForm.get('proxy_passphrase').errors.spaceatstart">
                          Should not end with a space!
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.spaceatend && aaaServerForm.get('proxy_passphrase').errors.spaceatstart">
                          Should not start & end with a space!
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.noTwoSpaces && !aaaServerForm.get('proxy_passphrase').errors.spaceatstart && !aaaServerForm.get('proxy_passphrase').errors.spaceatend">
                          Consecutive spaces not allowed
                        </div>
                      </div>
                    </div>

【讨论】：

【解决方案2】：

为什么不在验证器中处理这个逻辑。我只会做一个验证器并在那里处理所有错误，你也可以按照你想要的顺序添加它们。所以伪代码：

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    name: ['']
  }, { validator: this.myValidator});
}

myValidator(form: FormGroup) {
  // begin every time by removing all errors
  if (form) {
    form.setErrors(null);
    if ('some conditions here') {
      return { 'err1': true }
    }
    if ('some conditions here') {
      return { 'err2': true }
    }
    if ('some conditions here') {
      return { 'err3': true }
    }
    return null;
  }
  return null;
}

然后，此验证器一次只返回一个错误（如果存在错误）。

【讨论】：