Question

我有一个搜索栏，可以从数据库中检索数据，只要搜索成功，检索到的数据就会填充到一张席子表中，到目前为止效果很好，并且可以正常工作。

我面临的问题是，由于用户提供了无效信息，该搜索无法从数据库中检索任何内容。

当我向输入表单提供数据并且HTTP响应失败时，应该立即触发mat-error，但是只有当我两次单击搜索按钮时，这种错误才会发生。

这是我的代码：

MyComponent.component.ts

public inputForm: FormControl;

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

private searchForReturnByOrderNumber(value) {
  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;
          this.setReturns();
        } else {
          this.openDialog(orderNrData, returnOrdNrData);
        }
      }, error => {
        if (error.status === 404) {
          this.openDialog(orderNrData, []);
        }
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

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

private getErrorMessage() {
  return this.inputForm.invalid ? 'Invalid Search!' : '';
}

MyComponent.component.html

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

  <div class="col-8 search-div">

    <mat-form-field class="search-form-field" appearance="outline">
      <mat-label>Search</mat-label>

      <input matInput class="search-input" placeholder="Ex: EU030327" [formControl]="inputForm" #searchInput>
      <mat-error *ngIf="isInputInvalid()">{{ getErrorMessage() }}</mat-error>

    </mat-form-field>

    <span matSuffix>
      <button mat-flat-button class="search-btn" color="accent" [disabled]="isInputInvalid()"
        (click)="searchForReturnByOrderNumber(searchInput.value)"><i class="fa fa-search"></i></button>
    </span>

  </div>

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

如果我输入了一些无效数据（数据库中不存在的数据）并按下“ search-btn”，则只有再次按下按钮，我的垫子错误才会出现。

我已对此进行调试，并且代码正确输入了预期的代码：

} else {
  this.inputForm.setErrors({ 'invalid': true });
}

它将inputForm设置为无效，但是直到再次单击按钮时，才会出现mat-error。

有人知道怎么了吗？

谢谢！

Answer 1

您的*ngIf的条件未重新计算。我认为您可以将其替换为：

<mat-error *ngIf="inputForm?.hasError('invalid')">{{ getErrorMessage() }}</mat-error>

此外，您不需要getErrorMessage()方法中的条件。仅当您遇到错误时才显示该消息。您可能有一个竞争条件，导致此方法返回一个空字符串。尝试简化它。

Answer 2

您的错误是否一定是ngIf *？不仅可以使用ngClass吗？

如果您具有isInputInvalid属性，初始设置为false，并且搜索方法返回“ invalid”，然后将isInputInvalid属性设置为true，是否会无效？

然后您可以只使用ngClass：

<mat-error [ngClass]="{'your-class': isInputInvalid}">{{ getErrorMessage() }}</mat-error>

编辑：

HTML：

<mat-error [ngClass="{'show-mat-error': isInputInvalid}">{{ getErrorMessage() }}</mat-error>

TS-您需要'isInputInvalid'属性来更改：

isInputInvalid: boolean = false;

TS-您需要按照以下方式实现方法以更改'isInputInvalid'的值：

if (this.inputForm.hasError('invalid')) {
   this.isInputInvalid = true;
} else {
  this.isInputInvalid = false;
}

CSS：

mat-error {
display: none;
}

.show-mat-error {
display: block;
}

我可能还会在您的组件中执行类似的操作，以便每次用户导航到页面时都隐藏错误：

    constructor(private router: Router) {

  router.events.subscribe((event: Event) => {

    if (event instanceof NavigationStart) {
      this.isInputInvalid = false;
    }
  });

我希望这会有所帮助！

Answer 3

我能够解决我的问题，所以我会将解决方案发布给可能遇到此问题的任何人...

我创建了一个布尔值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 searchForReturnByOrderNumber(value) {
  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;
          this.setReturns();
        } else {
          this.isInputInvalid = false;
          this.openDialog(orderNrData, returnOrdNrData);
        }
      }, error => {
        this.isInputInvalid = true;
      });
    } else {
      this.isInputInvalid = true;
    }
  }, error => {
    this.isInputInvalid = true;
  });

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

private getErrorMessage() {
  return this.searchForm.controls['inputForm'].invalid ? 'Invalid Search!' : '';
}

MyComponent.component.html

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

  <div class="col-8 search-div">
    <form [formGroup]="searchForm">
      <mat-form-field class="search-form-field" appearance="outline">
        <mat-label>Search</mat-label>

        <input matInput class="search-input" placeholder="Ex: EU030327" formControlName="inputForm" #searchInput>
        <mat-error *ngIf="searchForm.controls['inputForm'].invalid">{{ getErrorMessage() }}</mat-error>

      </mat-form-field>
    </form>

    <span matSuffix>
      <button mat-flat-button class="search-btn" color="accent" [disabled]="searchForm.controls['inputForm'].invalid"
        (click)="searchForReturnByOrderNumber(searchInput.value)"><i class="fa fa-search"></i></button>
    </span>

  </div>

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

为什么只有单击两次按钮才能显示垫错误？

3 个答案: