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

Question

您好，以下是我的 angular 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

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

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;
}

此验证器一次只returns一个错误（如果存在错误）。

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

How to prevent multiple error message getting displayed in the angular html?

angular

typescript

angularjs-scope

angular-directive