垫错误不在垫形式字段内显示 [英] mat-error doesn't show inside mat-form-field

问题描述

演示

我在子组件中有mat-select代码，并传递输入以显示和隐藏错误.下面是我的代码，

I have mat-select code in a child component and I pass input to show and hide the error. Below here is my code,

  <mat-form-field>
    <mat-select [formControl]="ctrl" [placeholder]="placeholder">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="onError">Error: Required Field</mat-error>
  </mat-form-field>

onError是一个输入属性，它决定隐藏还是显示垫错误.

The onError is an input property that decides to hide or show the mat error.

下面是我所说的垫子选择

Below here is how I call the mat-select

<my-select onError="true" [ctrl]="form.get('cities')" [options]="cities" placeholder="Cities"></my-select>

推荐答案

两件事:

1.-您忘了对组件说选择内容是 [formControl]

1.- you forgot say to your component that the select is a [formControl]

<mat-select [formControl]="ctrl" [placeholder]="placeholder">
    ...
</mat-select>

2.-作为自己的formControl作为 [ctrl] 传递时，您无需实现ControlValueAccessor(仅当您创建自定义表单控件时才使用该控件-一个特殊组件"您可以在ReactiveForm内部使用或与[(ngModel)]一起用作普通的< input> -.我想说的是删除函数:writeValue，registerOnChange，...

2.- As you pass as [ctrl] the own formControl, you needn't implements ControlValueAccessor (this it's used only when you create a custom form control -a "special component" that you can use inside a ReactiveForm or used with [(ngModel)] as a normal <input>-. I want to say that remove the functions: writeValue, registerOnChange,...

这篇关于垫错误不在垫形式字段内显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！