Question

我在angular 2项目中使用反应式表单进行验证。我想突出显示按下“提交”时无效的字段。我通过使用md-Error在输入标签中实现了这一点，但我无法在md-Select中执行此操作。有人可以帮忙吗？

屏幕截图：http://i.imgur.com/uOQbwaZ.png

这是我正在使用的md-select示例：

<md-select placeholder="Listing Type" formControlName='listingType' required >
              <md-option *ngFor="let type of listType" [value]="type">
                {{ type }}
              </md-option>
            </md-select>

这是我正在使用的md输入：

<md-input-container class="more-width">
              <input mdInput formControlName='price' required placeholder="Price">
              <md-error>Please Enter Price</md-error>
            </md-input-container>

这是我正在申请的验证

 this.listingForm = this.fb.group({
      propertyType: ['', Validators.required]
})

Answer 1

您可以在框下方显示红线，但目前没有错误消息。我认为它很快就会出现。 Issue on Github

Answer 2

您可以在斜角材料文档here中找到一个很好的验证电子邮件地址的示例。

Answer 3

该错误现已解决。您只需要将mat-error放在mat-select的外部和mat-form-field的内部。这是一个例子

<mat-form-field appearance="fill">
  <mat-label>Favorite animal</mat-label>
   <mat-select [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an 
      animal</mat-error>
</mat-form-field>

有关详细信息，您可以检查以下链接 Error Messages in Angular form fields

如何在角度2中的材质选择框中显示md-error？

3 个答案: