Question

我正在Angular 8中使用Material和Reactive Forms构建一个应用程序。我有一个反应式表单，其中包含字段ItemID，标题和描述。

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>

Answer 1

这是因为默认情况下，表单元素内的任何按钮都将运行本机提交功能，以验证您的输入。

在按钮元素上使用type="button"。默认情况下，type="submit"

即使原始

1 个答案: