如何在 Angular 中触发自定义错误验证的即时 mat-error答案

【问题标题】：How trigger immediate mat-error on custom error validation in Angular如何在 Angular 中触发自定义错误验证的即时 mat-error
【发布时间】：2018-03-12 08:55:14
【问题描述】：

如何让我的自定义mat-error 立即触发？我知道 Angular 文档中有一个示例，但无法使其正常工作。我的验证不适用于empty，也不适用于某个type，例如email。

我希望在我的下拉字段中进行搜索但未找到任何记录时显示我的错误。项目下方的普通<div> 会立即在*ngIf 上触发，但不会在mat-error 上触发。我也尝试使用.innerHTML 更新 mat-error，但该字段不存在。我确定这是因为 Angular 还没有创建它。

这是我的 HTML：

<mat-form-field>
    <input type="text" placeholder="Customer Search" id="CustomerId" name="CustomerId" aria-label="Number" matInput [formControl]="myCustomerSearchControl"
      [matAutocomplete]="auto" (keyup)="onCustomerSearch($event)"
      required [errorStateMatcher]="matcher">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="setLoadId($event)">
      <mat-option *ngFor="let customer of customerArray" [value]="customer.Display">
        {{ customer.Display }}
      </mat-option>
    </mat-autocomplete>
    <mat-error id="customer-error" *ngIf="noCustomersFound.value">
      {{noCustomersFound.message}}
    </mat-error>
</mat-form-field>
<div>
    <span class="errorMessage" *ngIf="noCustomersFound.value">
      {{noCustomersFound.message}}
    </span>
</div>

这是我在 .ts 文件中的方法以及我尝试过的一些东西：

onCustomerSearch(search) {
    let searchObject = new SearchObject();
    searchObject.Entity = 'Customer';
    searchObject.SearchString = search.key;
    searchObject.SearchClauses = [{Column: 'sCustomerName'}];
    searchObject.DisplayColumn = 'sCustomerName';
    this.loadDataService.searchByEntity(searchObject)
      .subscribe(data => {
        if (data.length < 1) {
          this.noCustomersFound.value = true;
          this.noCustomersFound.message = 'No match found.'
          document.getElementById('customer-error').innerHTML = 'No match found.';
        } else {
          this.noCustomersFound.value = false;
          this.noCustomersFound.message = '';
        }
        this.customerArray = data;
      });
}

【问题讨论】：

标签： html angular typescript angular-material-5

【解决方案1】：

首先，您需要一个自定义验证器。

您可以通过在 CLI 中键入以下命令来生成将用于验证 FormControl 的指令：

ng g directive customValidator

该指令应该具有类似于此的功能：

//make sure to post this code below the class closing curly brackets.
export function customerSearchIsEmpty(searchResultsLength): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const isValid = searchResultsLength ? searchResultsLength > 0 : false;
    return isValid ? null : 
     { 'customerSearchIsEmpty': { value: control.value } }; };}

创建 FormControl 后，您应该动态添加新的验证器：

this.registeredForm.controls['myCustomerSearchControl'].setValidators([customerSearchIsEmpty(null)])

在您的 onCustomerSearch 函数所在的 TS 文件中，您应该再添加一个功能：

  myCustomerSearchControlIsInvalid() {
    this.myCustomerSearchControl.updateValueAndValidity();
    //instead of registeredForm, use your FormGroup name.
    if (this.registeredForm.hasError('customerSearchIsEmpty')) {
      this.noCustomersFound.message = 'No customer found'; //or any other message
    } else {
      return false;
    } return true;
 }

您应该修改您的以响应 myCustomerSearchControlIsInvalid() 函数的结果：

<mat-error *ngIf="myCustomerSearchControlIsInvalid()">
  {{noCustomersFound.message}}
</mat-error>

最后，您应该在 onCustomerSearch() 函数中添加这行代码。

onCustomerSearch(search) {
let searchObject = new SearchObject();
searchObject.Entity = 'Customer';
searchObject.SearchString = search.key;
searchObject.SearchClauses = [{Column: 'sCustomerName'}];
searchObject.DisplayColumn = 'sCustomerName';
this.loadDataService.searchByEntity(searchObject)
  .subscribe(data => {
  customerSearchIsEmpty(data.length);
  this.customerArray = data;
  });}

我希望这会有所帮助。

【讨论】：