问题描述
在我看来，Dynamically generating validation attribute on input using interpolation中出现了完全相同的问题，但是我正在{'a': 'ajhe5'}
中寻找解决方案，而不是Angular。
在我的反应式表单中，我使用的是这样的验证器：
AngularJS在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的{{1}}的{{1}}？
解决方法
您可以从最小/最大验证器获取错误对象，如下所示：
<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的官方文档
更新
只有当验证器被触发并变为无效时，角度验证器的值才对您可用。
例如，如果您有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>