Как вы читаете значение валидатора maxLength, чтобы вы могли напечатать его в форме?

Question

У меня есть реактивная форма, которая использует валидатор для контроля длины ввода.

Я хотел бы снова прочитать эту длину в шаблоне, чтобы я мог указать пользователю, какова максимальная длина на самом деле, но я не могу понять, как читать ее из формы.

Возможно ли это?

// investor-signup.component.ts
export class InvestorSignupComponent implements OnInit {

  public investorForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(5)]],
    // I want to access be able be able to print the '5' above into the form 
    // without having to duplicate the value or create another variable.
    url: [''],
    type: [''],
  })
}

// investor-signup.component.html

...
<input matInput
        formControlName="name"
        required
        placeholder="Startup Capital Inc.">

<mat-hint>Must be less than {{investorForm.name.validators.maxLength.value}} characters long</mat-hint>
// note - the investorForm.name.validators.maxLength.value above does NOT work

Как правильно читать этот maxLength обратно из объекта FormControl?

[отредактируйте для ясности] Я хочу прочитать значение перед пользователь создал ошибку, а не после. Это делается для того, чтобы сообщить им, что это за допуск, а не что у них есть проблема.

Я бы также хотел избежать использования отдельной переменной, чтобы сохранить минимальный код.

Answer 1

Должно быть так:

 <mat-hint *ngIf="investorForm.hasError('maxlength', 'name')">
  Max length: {{ investorForm.get('name').errors.maxlength.requiredLength }}</mat-hint>

Вы должны установить значение maxLength либо в жестком коде, либо из постоянного файла. Вы можете сохранить предел в переменной, а затем использовать в представлении. т.е.:

в component.ts:

const MAX_LENGTH = 3;

testForm: FormGroup;
  private maxLen = MAX_LENGTH;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.testForm = this.fb.group({
      name: ['', [Validators.maxLength(this.maxLen)]],
    })
  }

в component.html:;

<small> max allowed length is :  {{maxLen}} </small>

Демо