Formas reactivas angulares que generan atributos de validación dinámicamente en la entrada mediante interpolación

Question

Me parece que es exactamente el mismo problema que surgió en la generación dinámica del atributo de validación en la entrada mediante interpolación , sin embargo, estoy buscando una solución en Angular, no AngularJS.

En mis formularios reactivos estoy usando validadores como este:

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

En el htmlestoy codificando el número de 5000esa manera:

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

Pregunta: ¿hay alguna manera de hacerlo dinámicamente para acceder a las contactForm's formControlDescription' Validators.maxLength(5000)en el html?

Answer 1

Puede obtener el objeto de error de los validadores min / max de la siguiente manera:

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

una versión un poco más limpia:

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

Documentación oficial sobre maxLength Validator

Actualizar

Los valores de los validadores angulares solo estarán disponibles para usted cuando el validador se active y se vuelva inválido.

Por ejemplo, si lo tiene minLength(10), le dará una entrada no válida en el momento en que se toque y hasta que los caracteres sean o más de 10. Lo mismo es para maxLength(20), solo estará disponible en el errorsobjeto una vez que se active, es decir, el usuario tiene un tipo de más de 20 caracteres.

Esto presenta un problema si tiene la intención de usar actualLengthy requiredLengthpara mostrar estadísticas al usuario de manera consistente, ya que solo aparecerán cuando minLengtho maxLengthno sea válido.

Como se discutió, el mejor enfoque para usted será usar una variable separada para establecer y mostrar la longitud requerida. P.ej:

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

luego en tu plantilla úsalo:

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