Элемент управления угловым материалом выделен красным, хотя нетронутый - PullRequest
0 голосов
/ 09 июля 2019

Я создаю приложение в Angular 8 с Материальными и Реактивными формами.У меня есть реактивная форма с полями ItemID, Title и Description.

Рядом с полем ItemID есть кнопка поиска, которая отправляет HTTP-запрос для получения данных от внешнего API.Это все работает правильно.Однако после того, как кнопка поиска нажата и ответ получен, проверка выделяет поля «Заголовок» и «Описание» красным цветом, хотя поля еще не были затронуты и являются нетронутыми.Поскольку к полям еще не прикасались, они не должны выделяться красным цветом.

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

mat-form-field ng-tns-c9-58 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-outline mat-form-field-can-float mat-form-field-should-float mat-form-field-has-label ng-untouched ng-pristine ng-invalid mat-form-field-invalid

Компонент TS

  constructor(
    private fb: FormBuilder
  ) { }

// Initialize Item Detail form
this.itemDetailForm = this.fb.group({
  Item: this.fb.group({
    ItemID: [null],
  }),
  Title: [null, Validators.compose([
    Validators.required,
    Validators.maxLength(10),
  ])],
  Description: [null, Validators.compose([
    Validators.required,
    Validators.maxLength(10),
});

Компонент HTML

<form [formGroup]="itemDetailForm" (ngSubmit)="onSubmit()">
  <div formGroupName="Item">
    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label>Item ID</mat-label>
      <input matInput formControlName="ItemID">
    </mat-form-field>
    <button mat-raised-button (click)="onItemSearch(this.itemDetailForm.get('ItemID').value)"
   [disabled]="itemDetailForm.get('ItemID').invalid">
      <mat-icon>search</mat-icon>
    </button>
  </div>
  <mat-form-field appearance="outline" floatLabel="always">
    <mat-label>Title</mat-label>
    <input matInput formControlName="Title">
  </mat-form-field>
  <mat-form-field appearance="outline" floatLabel="always">
    <mat-label>Description</mat-label>
    <input matInput formControlName="Description">
  </mat-form-field>
</form>

1 Ответ

1 голос
/ 09 июля 2019

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

Используйте type="button" на элементе кнопки.По умолчанию type="submit"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...