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

普拉桑斯

嗨，下面是我的html文件中的代码片段。我想如果elseif的（条件）ELSEIF（条件）使用来实现ngif和ng-container。

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

例如，当前，如果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>

AJT82

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。