Angular Reactive Forms generiert dynamisch ein Validierungsattribut bei der Eingabe mithilfe der Interpolation

Question

Es scheint mir, dass genau das gleiche Problem bei der dynamischen Generierung von Validierungsattributen bei der Eingabe mithilfe von Interpolation aufgetreten ist , aber ich suche nach einer Lösung in Angular, nicht AngularJS.

In meinen reaktiven Formularen verwende ich folgende Validatoren:

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

Auf der htmlbin ich die Nummer so 5000fest zu codieren :

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

Frage: Gibt es eine Möglichkeit, dynamisch auf die contactForm's formControlDescription' Validators.maxLength(5000)in der zuzugreifen html?

Answer 1

Sie können das Fehlerobjekt von den Min / Max-Validatoren wie folgt abrufen:

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

etwas sauberere Version:

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

Offizielle Dokumentation zum maxLength Validator

Aktualisieren

Die Werte von Winkelprüfern stehen Ihnen erst zur Verfügung, wenn der Prüfer ausgelöst und ungültig gemacht wird.

Wenn Sie dies beispielsweise getan haben minLength(10), erhalten Sie in dem Moment, in dem es berührt wird und bis die Zeichen mindestens 10 sind , eine ungültige Eingabe. Dies gilt auch für maxLength(20)das errorsObjekt, wenn es ausgelöst wird, dh der Benutzer hat mehr als 20 Zeichen eingegeben .

Dies stellt ein Problem dar, wenn Sie beabsichtigen, die Statistiken zu verwenden actualLengthund requiredLengthdem Benutzer konsistent anzuzeigen, da sie nur angezeigt werden, wenn sie entweder ungültig minLengthoder maxLengthungültig sind.

Wie bereits erwähnt, besteht der beste Ansatz für Sie darin, eine separate Variable zu verwenden, um die erforderliche Länge festzulegen und anzuzeigen. Z.B:

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

dann benutze es in deiner Vorlage:

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