Как показать минимальную ошибку проверки в формах angular?

Question

**Component.html**

<form class="example-form" [formGroup]="signUpForm">
<mat-form-field class="example-full-width">
        <mat-label>User Name</mat-label>
        <input matInput formControlName="fullName" />
        <mat-error *ngIf="fullName.hasError('required')">
          User Name is <strong>required</strong>
        </mat-error>
        <mat-error *ngIf="fullName.hasError('minLength')">
          User Name must have at least 5 characters
        </mat-error>
</mat-form-field>
</form>

**Component.ts**

 signUpForm = this.fb.group({
    fullName: ['dd', [Validators.required, Validators.minLength(5)]],
    email: ['', [Validators.required, Validators.email]],
    password: ['ss', [Validators.required, Validators.minLength(8)]],
    confirmPassword: ['', Validators.required]
  }, { validator: passwordMatchValidator })

  /* Shorthands for form controls (used from within template) */
  get fullName() { return this.signUpForm.get('fullName'); }
  get email() { return this.signUpForm.get('email'); }
  get password() { return this.signUpForm.get('password'); }
  get confirmPassword() { return this.signUpForm.get('confirmPassword'); }

Я хочу показать минимальную ошибку проверки, я выделяю красную рамку, но не отображаю сообщения об ошибках, может ли кто-нибудь помочь мне с этим?

Answer 1

Здесь вы можете проверить код и рабочий пример:

* ngIf = "f.password.errors.minlength"

В component.ts:

пароль: [', [Validators.required, Validators.minLength (6)]]

Для тщательной проверки правильности ссылки на фрагмент кода:

Angular проверка формы

Спасибо

Answer 2

Это должно быть 'minlength':

*ngIf="fullName.hasError('minlength')"