为什么Mat-error在MatDialog上起作用而在普通页面上不起作用？

Question

我有一个带有输入字段和按钮的普通HTML页面。

用户在输入字段上插入一些值，应用程序发出HTTP请求。

如果HTTP响应正常，则用户导航到其他页面，否则将显示错误提示框，警告用户其搜索无效。

在我的mat-dialog中，我有完全相同的情况。

我遇到的问题是，在正常页面中，我必须按两次按钮才能出现垫错误，但是，在垫对话框中，垫错误会立即出现。

代码完全一样。

这是我的代码：

MyComponent.component.ts 和 MyDialog.component.ts

public inputForm: FormControl;

ngOnInit() {
  this.inputForm = new FormControl('');
}

private getData(value: any, returnType: string) {
  if (value === undefined || value === "") {
    this.inputForm.setErrors({ 'invalid': true });
  } else {
    this.getOrder(value, returnType);
  }
}

private getOrder(value: any, returnType: string) {
  if (value.length > 0 && !isNaN(value)) {
    this.getOrderByID(value, returnType);
  } else if (value.length > 0 && isNaN(value)) {
    this.getOrderByNumber(value, returnType);
  }
}

private getOrderByID(value: number, returnType: string) {
  this.rest.getOrder(value).subscribe((orderIdData: {}) => {
    if (Object.entries(orderIdData).length !== 0) {
      this.rest.getReturnByOrderId(value).subscribe((returnOrdIdData: Return[]) => {
        if (Object.entries(returnOrdIdData).length !== 0) {
      this.returns = returnOrdIdData;
    } else {
      this.returns = [];
    }
    this.onCreateReturn(orderIdData, returnType);
      }, error => {
    if (error.status === 404) {
      this.returns = [];
    }
    this.onCreateReturn(orderIdData, returnType);
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

private getOrderByNumber(value: string, returnType: string) {
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.rest.getReturnByOrderNumber(value).subscribe((returnOrdNrData: Return[]) => {
        if (Object.entries(returnOrdNrData).length !== 0) {
      this.returns = returnOrdNrData;
    } else {
      this.returns = [];
    }
    this.onCreateReturn(orderNrData, returnType);
      }, error => {
    if (error.status === 404) {
      this.returns = [];
    }
    this.onCreateReturn(orderNrData, returnType);
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

private getErrorMessage() {
  return (<HTMLInputElement>document.getElementById("input-form-id")).value === "" ? 'Este campo é obrigatório!' : 'A encomenda que inseriu não existe!';
}

private onCreateReturn(el: {}, returnType: string) {
  this.setData(el, returnType);
  this.router.navigate(['returns-create']);
}

private isInputInvalid() {
  if (this.inputForm.invalid) return true;
    return false;
}

MyComponent.component.html 和 MyDialog.component.html

<div class="row">
  <div class="col-2 order-label">Order: </div>

  <div class="col-8 search-div">
    <mat-form-field class="search-form-field" appearance="standard">
      <input matInput class="order-input" id="input-form-id" placeholder="Ex: EU030327" [formControl]="inputForm" #searchInput>
      <mat-error *ngIf="isInputInvalid()">{{ getErrorMessage() }}</mat-error>
      <mat-hint>Insira o ID ou o Nº de uma encomenda.</mat-hint>
    </mat-form-field>
  </div>

  <div class="col-2"></div>
</div>

<br>

<button mat-raised-button color="accent" (click)="getData(searchInput.value, 'Refund')" [disabled]="isInputInvalid()">Refund</button>

我需要在响应返回错误或响应为空时出现mat-error，但是只有在MyDialog组件中才是这种情况...

为什么会这样？

谢谢！

Answer 1

对于经过几天的反复试验后可能遇到此问题的人，我实现了可行的解决方案...

我创建了一个布尔值isInputInvalid，默认情况下将其设置为true。 每当我按下按钮时，都会执行HTTP请求，并且根据响应，将isInputInvalid布尔值设置为true或false。 如果HTTP响应无效，则将其设置为true，如果有效，则将其设置为false。

然后，如果布尔值为true，则将表单控件设置为无效。

在我的HTML文件中，我用<form>包围了输入，并创建了[formGroup]。 为了进行错误验证，我将*ngIf内的<mat-error>设置为等于searchForm.controls['inputForm'].invalid。

这是我的代码：

MyComponent.component.ts

private searchForm: FormGroup;
private isInputInvalid: boolean = true;

ngOnInit() {
  this.searchForm = new FormGroup({
    inputForm: new FormControl('')
  });
}

private getData(value: any, returnType: string) {
  if (value === undefined || value === "") {
    this.inputForm.setErrors({ 'invalid': true });
  } else {
    this.getOrder(value, returnType);
  }
}

private getOrder(value: any, returnType: string) {
  if (value.length > 0 && !isNaN(value)) {
    this.getOrderByID(value, returnType);
  } else if (value.length > 0 && isNaN(value)) {
    this.getOrderByNumber(value, returnType);
  }
}

private getOrderByID(value: number, returnType: string) {
  this.rest.getOrder(value).subscribe((orderIdData: {}) => {
    if (Object.entries(orderIdData).length !== 0) {
      this.rest.getReturnByOrderId(value).subscribe((returnOrdIdData: Return[]) => {
        if (Object.entries(returnOrdIdData).length !== 0) {
          this.isInputInvalid = false;
          this.returns = returnOrdIdData;
        } else {
          this.isInputInvalid = false;
          this.returns = [];
        }
        this.onCreateReturn(orderIdData, returnType);
      }, error => {
        this.isInputInvalid = true;
        if (error.status === 404) {
          this.returns = [];
        }
        this.onCreateReturn(orderIdData, returnType);
      });
    } else {
      this.isInputInvalid = true;
    }
  }, error => {
    this.isInputInvalid = true;
  });

  if(this.isInputInvalid){
    this.searchForm.controls['inputForm'].setErrors({ 'invalid': true });
  }
}

private getOrderByNumber(value: string, returnType: string) {
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.rest.getReturnByOrderNumber(value).subscribe((returnOrdNrData: Return[]) => {
        if (Object.entries(returnOrdNrData).length !== 0) {
          this.isInputInvalid = false;
          this.returns = returnOrdNrData;
        } else {
          this.isInputInvalid = false;
          this.returns = [];
        }
        this.onCreateReturn(orderNrData, returnType);
      }, error => {
        this.isInputInvalid = true;
        if (error.status === 404) {
          this.returns = [];
        }
        this.onCreateReturn(orderNrData, returnType);
      });
    } else {
      this.isInputInvalid = true;
    }
  }, error => {
    this.isInputInvalid = true;
  });

  if(this.isInputInvalid){
    this.searchForm.controls['inputForm'].setErrors({ 'invalid': true });
  }
}

private getErrorMessage() {
  return (<HTMLInputElement>document.getElementById("input-form-id")).value === "" ? 'Este campo é obrigatório!' : 'A encomenda que inseriu não existe!';
}

private onCreateReturn(el: {}, returnType: string) {
  this.setData(el, returnType);
  this.router.navigate(['returns-create']);
}

MyComponent.component.html

<div class="row">
  <div class="col-2 order-label">Order: </div>

  <div class="col-8 search-div">
    <form [formGroup]="searchForm">
      <mat-form-field class="search-form-field" appearance="standard">
        <input matInput class="order-input" id="input-form-id" placeholder="Ex: EU030327" formControlName="inputForm" #searchInput>
        <mat-error *ngIf="searchForm.controls['inputForm'].invalid">{{ getErrorMessage() }}</mat-error>
        <mat-hint>Insira o ID ou o Nº de uma encomenda.</mat-hint>
      </mat-form-field>
    </form>
  </div>

  <div class="col-2"></div>
</div>

<br>

<button mat-raised-button color="accent" (click)="getData(searchInput.value, 'Refund')" [disabled]="searchForm.controls['inputForm'].invalid">Refund</button>