Angular 8: сделать раскрывающийся список выбора материала недействительным красным с логической переменной ввода

Question

Мы создаем оболочку на Angular Выбор материала. Как сделать, чтобы раскрывающийся список выбора материала отображался красной ошибкой, недействительной строго через логическую переменную @Input () Есть ли входная переменная и место для выполнения этого в Typescript или html?

    <div class="dropdown-cont">
        <mat-form-field appearance="outline">
            <mat-label>{{label}}</mat-label>
            <mat-select
                disableOptionCentering
                [disabled]="disabled"
                [ngStyle]="styles"
                [(ngModel)]="selectedItem"
                (selectionChange)="selectedItemChanged($event)"
                >
                <mat-option [value]="defaultItem[txtValue]">{{defaultItem[txtField]}}</mat-option>
                <mat-option
                    *ngFor="let item of listItems"
                    [value]="item[txtValue]"
                >
                {{item[txtField]}}
                </mat-option>
            </mat-select>
            <mat-hint>{{hint}}</mat-hint>
        </mat-form-field>
    </div>

В настоящее время нет формы или форм-контроля, прикрепленных к этому, однако они готовы приложить небольшой минимум для выполнения этого при необходимости.

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

Answer 1

Если вы хотите использовать логическое значение @Input, ответ прост, вы можете использовать троичные условия.

Например, вы можете создать два класса css, которые будут запускаться условно, этим логическим значением @Input например,

<div [class]="booleanInput ? 'class if true' : 'class if false'>
...
</div>

angular автоматически проверит это условие при изменении значения @Input.

Также вы можете проверить изменения, внедрив OnChange следующим образом:

import { ... , Input, OnChanges, SimpleChanges } from '@angular/core';
...
export class Component implements OnChanges {
  @Input condition: boolean;
...
  ngOnChanges(changes: SimpleChanges): void {
    console.log('Change Detected', changes);
  }
...
}

Вы можете использовать троичные условия каждый раз, когда эти значения условно изменятся

• важно помнить, что @Input values ​​будут доступны OnInit State

Answer 2

Это вы ожидаете?

HTML:

<mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder" [(ngModel)]="myInput" required>
    <mat-hint>Hint</mat-hint>
  <mat-error>Error appears instantly</mat-error>
</mat-form-field>

РЕДАКТИРОВАТЬ
Des c: отображение <mat-error> условно, для для этого необходимо установить ngModel как недопустимое, <mat-error> отображается только при недопустимом ngModel.

HTML:

<mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder" [(ngModel)]="myInput" required #myModel="ngModel">
  <mat-error *ngIf="myModel.errors?.required">Error appears instantly</mat-error>
  <mat-error *ngIf="myModel.errors?.myCustomError">This is my custom error</mat-error>
</mat-form-field>
<br>
<button (click)="toggleError(true)">Show Custom Error</button>
<button (click)="toggleError(false)">Hide Custom Error</button>

TS:

import { Component, ViewChild } from "@angular/core";
import { NgModel } from "@angular/forms";

@ViewChild("myModel", { static: false }) myModel: NgModel;

toggleError(isShow) {
    if (isShow) {
      this.myModel.control.setErrors({ myCustomError: true });
    } else {
      if (this.myModel.control.hasError("myCustomError")) {
        delete this.myModel.control.errors["myCustomError"];
        this.myModel.control.updateValueAndValidity();
      }
    }
  }

Рабочая демоверсия