Angular Material Trigger 以编程方式触及状态答案

【问题标题】：Angular Material Trigger Touched State ProgrammaticallyAngular Material Trigger 以编程方式触及状态
【发布时间】：2017-09-22 05:00:08
【问题描述】：

我正在使用带有@angular/material 版本2.0.0-beta.10 的Angular 4 Reactive Forms。我需要以编程方式显示md-error 消息。

在必填字段中，当用户在未输入任何文本的情况下离开输入时，我有一个md-error，上面写着“此字段是必填项”。见代码：

<md-form-field>
    <input mdInput type="text"
           formControlName="PartNumber"
           placeholder="Part Number"
           maxlength="250"
           required />
    <md-error *ngIf="formGroup.controls['PartNumber'].hasError('required')">
        Part Number is <strong>required</strong>
    </md-error>
</md-form-field>

我都试过了：

this.formGroup.markAsTouched();
this.formGroup.markAsDirty();

当我调用markAsTouched() 或markAsDirty() 时，<input> 下方的md-error 文本不会出现。

如何以编程方式触发触摸状态以显示错误消息？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

解决方案是遍历每个控件并将每个控件标记为已触摸：

Object.keys(this.formGroup.controls).forEach(key => {
    const ctrl = this.formGroup.get(key);
    ctrl.markAsTouched({ onlySelf: true });
});

【讨论】：

或 ctr.markAsDirty() 如果不工作

【解决方案2】：

更好的解决方案可能是使用custom error matcher。

这是一个使用类属性来决定何时显示错误的示例：http://plnkr.co/edit/U5xtdKWggcbgU2EHKkK9?p=preview

<md-form-field>
  <input mdInput [formControl]="myInput" placeholder="My Input" [errorStateMatcher]="showWhenISayTo">
  <md-error>Field is required</md-error>
</md-form-field>


// Set this to `true` to show the errors
showError = false;

myInput = new FormControl('', Validators.required)

showWhenISayTo = () => {
  return this.showError;
}

此外，您可以将其配置为全局使用相同的行为。这是一个在无效控件变脏时立即显示错误的示例：http://plnkr.co/edit/gcQuzYChrl5d7UYXo8eS?p=preview

import {MD_ERROR_GLOBAL_OPTIONS, showOnDirtyErrorStateMatcher} from '@angular/material';

@NgModule({
  providers: [
    {provide: MD_ERROR_GLOBAL_OPTIONS, useValue: {errorStateMatcher: showOnDirtyErrorStateMatcher}}
  ]
})

【讨论】：