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>

输入表单元素中的Aria-Invalid变为true，而无需触摸它

1 个答案: