Я создаю приложение в 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>