Question

嗨，以下是我的html文件中的代码片段。我正在尝试使用ngif和ng-container实现if elseif（condition）elseif（condition）。

我要实现的只有一个代码块应该打印错误。换句话说，我不想打印两个错误消息。我不知道为什么我的代码无法正常工作。

例如，当前 formGroup.hasError('invalidPasswordStrength')和formGroup.hasError('blacklistedPassword')是正确的，它将打印两个错误消息。

我期望的是，如果两个都正确，我想打印与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>

Answer 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>

Answer 2

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

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

如何防止多个错误消息显示在有角度的html中？

2 个答案: