Добавление проверки вручную в поле формы angular mat

Question

Я работаю над приложением angular и использую в нем поля формы мата.

Мой код для поля формы мата, включая проверку, выглядит следующим образом.

<mat-form-field appearance="fill">
  <mat-label> {{ Email }}</mat-label>
  <input formControlName="email">
  <mat-error *ngIf="service.form.get('email').hasError('maxlength')">{{ 'Display.messageLength' }}</mat-error>
  <mat-error *ngIf="service.form.get('email').hasError('required')">{{ 'Display.requiredMessage' }}</mat-error>
</mat-form-field>

Теперь в TS файл У меня есть флаг, скажем,

    duplicateField = true

Теперь, когда этот флаг имеет значение true, я хочу показать свое собственное сообщение об ошибке в поле формы мат, и если это поле имеет значение false, я хочу, чтобы мои другие проверки работали, как раньше , Как я могу это сделать?

Answer 1

HTML

<mat-form-field appearance="fill">
  <mat-label> {{ Email }}</mat-label>
  <input formControlName="email">
  <mat-error>{{getErrorMessage()}}</mat-error>
</mat-form-field>

TS

this.YOURFORMGROUPNAME= this.formBuilder.group({
      email: ['', [Validators.required, Validators.minLength(12)]]
    });

getErrorMessage() {
    const emailFormControl = this.YOURFORMGROUPNAME.get('email');

    if (emailFormControl.hasError('required')) {
      return 'Email is required.';
    }

    if (emailFormControl.value.toString().length !== 12) {
        emailFormControl.setErrors({
            'errorLength': true
        });
    }

    if (emailFormControl.hasError('errorLength')) {
        return 'Value can be 12 characters long.';
    }
  }

Answer 2

Вы можете сделать:

<mat-form-field appearance="fill">
  <mat-label> {{ Email }}</mat-label>
  <input formControlName="email">

  <div *ngIf="duplicateField; then customMessage else otherMessages"></div>

  <ng-template #customMessage>
     <mat-error>My custom message</mat-error>
  </ng-template>

  <ng-template #otherMessages>
     <mat-error *ngIf="service.form.get('email').hasError('maxlength')">{{ 'Display.messageLength' }}</mat-error>
     <mat-error *ngIf="service.form.get('email').hasError('required')">{{ 'Display.requiredMessage' }}</mat-error>
  </ng-template>
</mat-form-field>