Блог

У меня такой странный сценарий. моя ошибка матирования отображается по умолчанию, даже не касаясь поля ввода. В принципе, когда я загружаю страницу, сообщение об ошибке отображается без какого-либо взаимодействия с пользователем в поле ввода. У меня нет никаких сообщений об ошибках в консоли браузера. Может кто-нибудь указать, что я пропустил?

Это мой файл .ts

 frmStep3: FormGroup;
  matcher = new MyErrorStateMatcher();
// omited unrelated code 
       this.frmStep3 = this.fb.group({
          courseDurationNum: [, [Validators.required, Validators.maxLength(3), Validators.minLength(1)]]
       
        });
      return {
         frmStep3: this.frmStep3
        };
  

Это мой HTML

  <form class="form-group-parent p-0" [formGroup]="frmStep3" (ngSubmit)="stepForward()">
            <div class="form-group d-inline-block">
              <label class="w-100">Choose your course duration<sup>*</sup></label>
              <input [errorStateMatcher]="matcher" [maxLength]="3" type="text" class="float-left" matInput
                formControlName="courseDurationNum" placeholder="Ex. 1 - 365 Day(s)" />
              <mat-error class="w-100 float-left"
                *ngIf="frmStep3.get('courseDurationNum').hasError('required') || frmStep3.get('courseDurationNum').invalid">
                <strong>Duration</strong> must be between <strong>1 - 365</strong> day(s).
              </mat-error>

            </div>         
          </form>
  

Я понял, я пропустил их в элементах управления from в <mat-form-field> теге. Исправьте приведенный ниже код.

  <form class="form-group-parent p-0" [formGroup]="frmStep3" (ngSubmit)="stepForward()">
            <div class="form-group d-inline-block">
<mat-form-field>
              <label class="w-100">Choose your course duration<sup>*</sup></label>
              <input [errorStateMatcher]="matcher" [maxLength]="3" type="text" class="float-left" matInput
                formControlName="courseDurationNum" placeholder="Ex. 1 - 365 Day(s)" />
              <mat-error class="w-100 float-left"
                *ngIf="frmStep3.get('courseDurationNum').hasError('required') || frmStep3.get('courseDurationNum').invalid">
                <strong>Duration</strong> must be between <strong>1 - 365</strong> day(s).
              </mat-error>
</mat-form-field>
            </div>         
          </form>