Angular 反应式表单使用插值动态生成输入验证属性

Question

在我看来，Dynamically generating validation attribute on input using interpolation 中提出的问题完全相同，但我正在 Angular 中寻找解决方案，而不是 AngularJS。

在我的 Reactive Forms 中，我使用这样的验证器：

public contactForm: FormGroup = this.formBuilder.group({
  ...
  formControlDescription: [
    '',
    Validators.compose([
      Validators.maxLength(5000),
      Validators.minLength(30),
      Validators.required,
    ]),
  ],
  ...
});

在 html 上，我以这种方式对数字 5000 进行硬编码：

<mat-hint align="end">{{ contactForm.get('formControlDescription')!.value.length }} / 5000</mat-hint>

问题： 有没有办法动态访问 contactForm 的 formControlDescription 的 Validators.maxLength(5000) html?

Answer 1

您可以从 min/max 个验证器中获取错误对象，如下所示：

<mat-hint align="end">{{ contactForm.get('formControlDescription')?.errors.maxlength?.actualLength }} / {{ contactForm.get('formControlDescription')?.errors.maxlength?.requiredLength }} </mat-hint>

更简洁的版本：

<mat-hint align="end">    
  {{ contactForm.errors?.formControlDescription?.maxlength?.actualLength}} / 
  {{ contactForm.errors?.formControlDescription?.maxlength?.requiredLength}}
</mat-hint>

关于maxLength Validator

的官方文档

更新

angular 验证器的值只有在验证器被触发并呈现为无效时才对您可用。

例如，如果你有 minLength(10)，它会在触摸它的那一刻给你无效输入，直到字符等于或超过 10。 maxLength(20) 也是如此，一旦它被触发，它只会在 errors 对象中可用，即用户输入超过 20 个字符。

如果您打算使用 actualLength 和 requiredLength 始终如一地向用户显示统计信息，这会带来问题，因为它们只会在 minLength 或 maxLength 时出现无效。

如前所述，最适合您的方法是使用单独的变量来设置和显示所需的长度。例如：

const validatorOptions = {
  maxLength: 5000,
  minLength: 5
}

然后在您的模板中使用它：

<mat-hint align="end">{{ contactForm.controls.formControlDescription?.value.length }} / {{validatorOptions.maxLength}}</mat-hint>

Angular 反应式表单使用插值动态生成输入验证属性

Angular Reactive Forms Dynamically Generating Validation Attribute on Input using Interpolation

typescript

angular-validation

angular

angular-reactive-forms