时间戳

首页 > 解决方案 > Angular material Input自定义mat错误问题

angular - Angular material Input自定义mat错误问题

问题描述

我有一个带有formControl自定义垫子错误的角度材料输入。当我实现 mat-error 时，它看起来像这样，Invalid即使它没有聚焦。那有什么问题？

在此处输入图像描述

模板.html

<form class="myform">
  <mat-form-field class="full-width">
    <mat-label>Project</mat-label>
      <input matInput
        [formControl]="projectNameControl"
        [errorStateMatcher]="matcher"
        autocomplete="off" type="text"
        placeholder="Type Project Name" >
        <mat-error *ngIf="projectNameControl.hasError('required')">
          Project name is <strong>required</strong>
        </mat-error>
     </mat-form-field>
</form>

组件.ts


import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));}}

  @Component({
    selector: 'app-upload-data',
    templateUrl: './upload-data.component.html',
    styleUrls: ['./upload-data.component.scss']
  })

  export class UploadDataComponent implements OnInit {
    /*Rest Code here*/
    projectNameControl = new FormControl('', [Validators.required]);    
    matcher = new MyErrorStateMatcher();
  }
}

app.module.ts

import {ErrorStateMatcher, ShowOnDirtyErrorStateMatcher} from '@angular/material/core';

providers: [{provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}]

标签： angularangular-material

解决方案

首先，您已经创建了一个自定义错误状态匹配器，您已经绑定了输入，但是您已经在 app.module.ts 中将默认的 ErrorStateMatcher 切换为 ShowOnDirtyErrorStateMatcher。

这是预期的想法吗？你能扩展你的想法吗？

其次，您的输入看起来很奇怪。看起来它有一个错误（因为您已将光标聚焦，但占位符没有转换为标签。您检查控制台了吗？在我看来，某些东西没有正确安装，或者您忘记导入 MatInputModule？

推荐阅读