minlength 和 maxlength，角度错误验证答案

【问题标题】：minlength and maxlength, error validation in angularminlength 和 maxlength，角度错误验证
【发布时间】：2022-11-05 02:47:06
【问题描述】：

this.employeeForm = this.fb.group({
      fullName: [
        '',
        [
          Validators.required,
          Validators.minLength(2),
          Validators.maxLength(10),
        ],
      ],
      email: [''],
      skills: this.fb.group({
        skillName: [''],
        experienceInYears: [''],
        proficiency: [''],
      }),
    });

我正在使用反应形式（角度）进行验证和错误展示。但是要显示错误消息，用户输入的输入不在最小和最大标准之间，我遇到了问题。

<div class="col-sm-8">
            <input
              id="fullName"
              type="text"
              class="form-control"
              formControlName="fullName"
            />
            <p
              *ngIf="
                employeeForm.get('fullName')?.invalid &&
                employeeForm.get('fullName')?.touched
              "
            >
              please enter the valid full name
            </p>
            <p *ngIf="employeeForm.get('fullName')?.errors">  <-- I am not able to access the minLength and maxLength after errors , therefore not able to show case the error message also
              Full name should be under min and max
            </p>
          </div>
        </div>

如何在最小和最大长度出现错误的情况下展示错误。在employeeForm.get('fullName')?.errors. no minLength / maxLenth 之后什么都没有发生。

提前致谢

【问题讨论】：

标签： angular validation angular-reactive-forms

【解决方案1】：

Toof_LD 的答案很好，但如果您想考虑实现更多可重用代码，请查看自定义验证器。它们非常易于使用，一旦创建，您就可以在应用程序的任何位置使用它们。当然，当有大量代码检查验证（例如在 HTML 中）或需要执行更高级的验证时，推荐使用此解决方案。

总体而言，语法非常简单。

没有参数的自定义验证器的语法：

function customValidator(control: AbstractControl): {[key: string]: boolean} | null {
   if(sthWrong) {
      return { yourValidatorName: true};
   }
    
   return null;
}

带有参数的验证器的语法：

function customValidatorWithParameters(parameters: any): ValidatorFn {
   return(control: AbstractControl): {[key: string]: boolean} | null {
      if(sthWrong) {
         return { yourValidatorName: true};
      }
      
      return null;
   }
}

最好的部分是这一切都归结为在 HTML 中检查控件是否有效（例如，通过 true 或 false 值）。下面是一个简单使用带有参数的自定义验证器的示例。 https://stackblitz.com/edit/angular-ivy-4tfvfd?file=src/app/app.component.ts

【讨论】：

【解决方案2】：

尝试这个：

在 .ts 文件中：

get formControl(){
return this.employeeForm.controls;
}

在表单模板中

<div class="col-sm-8">
    <input
            id="fullName"
            type="text"
            [ngClass]="{'is-invalid': isSubmitted && formControl.fullName.errors}"
            class="form-control"
            formControlName="fullName"
    />
    <div class="invalid-feedback"
         *ngIf="isSubmitted && formControl.fullName.errors">
        <ng-container *ngIf="formControl.fullName.errors.minLength || formControl.fullName.errors.maxLength ">
            please enter the valid full name
        </ng-container>
    </div>
</div>

【讨论】：

感谢您的回复，不知道您的解决方案也不适用于我的情况*ngIf="employeeForm.controls?.['fullName']?.errors?.['maxlength'] 我用这种方式访问属性。你能告诉我为什么会这样吗
我想如果你有 formControl(){ return this.employeeForm.controls;你不需要控制 *ngIf

【解决方案3】：

您应该使用 'maxlength' 而不是 maxLength'

【讨论】：