Aria-Invalid в элементе формы ввода становится истинным, не касаясь его

Question

У меня есть реактивная форма в моем html-коде для отправки файла на сервер с описанием (обязательным) этого файла, но у меня странное поведение, когда я нажимаю кнопку ввода для загрузки файла, другой ввод становится красным !, если я начну пока описание ввода, оно работает, я проверил, какие изменения в первом случае, и обнаружил, что:

aria-invalid="false"

для моего описания ввод изменится на:

aria-invalid="true"

Мой HTML-компонент:

<form [formGroup]="testForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input matInput formControlName="description" type="text" placeholder="age">
      <mat-error *ngIf="!testForm.get('description').valid && testForm.get('description').touched">
        Required
      </mat-error>
    </mat-form-field>
    <input type="file" hidden #fileInput formControlName="documentFile">
    <button mat-raised-button (click)="fileInput.click()">
      Upload your file
      <mat-icon>library_add</mat-icon>
    </button>
    <br>
    <button
     primary
     mat-raised-button
     type="submit"
     [disabled]="!testForm.valid"
     >
      Envoyer
    </button>
  </form>

Мой .ts компонент:

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
 selector: 'app-autre',
 templateUrl: './autre.component.html',
 styleUrls: ['./autre.component.css']
})
export class AutreComponent implements OnInit {
  testForm: FormGroup;
  constructor() { }

 ngOnInit() {
   this.testForm = new FormGroup({
  'description': new FormControl(null, Validators.required),
  'documentFile': new FormControl(null)
  });
 }
onSubmit() {
  console.log(this.testForm);
 }
}

Если у вас есть идея, почему я так поступаю? спасибо

Answer 1

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

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

Вы можете использовать нетронутую опцию для вашего случая,

<mat-error *ngIf="!testForm.get('description').valid && testForm.get('description').touched && !testForm.get('description').pristine"> Required </mat-error>