Angular Reactive Forms Gerando Dinamicamente Atributo de Validação na Entrada usando Interpolação

Question

Parece-me que é exatamente o mesmo problema que foi levantado em Gerando dinamicamente o atributo de validação na entrada usando interpolação , porém estou procurando uma solução Angular, não AngularJS.

Em minhas formas reativas, estou usando validadores como:

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

No html, estou codificando o número 5000dessa maneira:

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

Pergunta: existe uma maneira de fazer isso dinamicamente para acessar o contactForm's formControlDescription' Validators.maxLength(5000)no html?

Answer 1

Você pode obter o objeto de erro dos validadores mínimo / máximo da seguinte forma:

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

versão um pouco mais limpa:

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

Documentação oficial do validador maxLength

Atualizar

Os valores dos validadores angulares só ficarão disponíveis para você quando o validador for disparado e tornado inválido.

Por exemplo, se tiver minLength(10), ele fornecerá uma entrada inválida no momento em que for tocado e até que os caracteres sejam ou mais de 10. O mesmo é para maxLength(20), só estará disponível no errorsobjeto uma vez que seja acionado, ou seja, o usuário digitou mais de 20 caracteres.

Isso representa um problema se você pretende usar actualLengthe requiredLengthpara mostrar estatísticas ao usuário de forma consistente, pois elas só aparecerão quando minLengthou maxLengthfor inválido.

Conforme discutido, a melhor abordagem para você será usar uma variável separada para definir e mostrar o comprimento necessário. Por exemplo:

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

então, em seu modelo, use-o:

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