时间戳

首页 > 解决方案 > 文本区域上的模板驱动表单验证

css - 文本区域上的模板驱动表单验证

问题描述

我在我的角度表单中添加了一个文本区域。所有输入/垫选择字段都可以使用所需的属性。对于textarea我添加了一个自定义类来显示红色边框。出于某种原因，当我单击清除按钮时，两个输入字段会自动应用其自己的红色类，但我的 a 自定义类texarea不会，除非它已被触摸。这很好，但与输入字段的样式不匹配。如何将相同的验证样式应用于文本区域：https ://stackblitz.com/edit/angular-mpefs​​n

.text-error.ng-invalid.ng-touched{
  border: 1px solid #b00b00;
}

如果您在堆栈闪电战加载时最初单击清除按钮，您将看到两个输入字段变为红色，但textarea. 这是因为我有ngtouched课。但是如果我删除它，那么 textarea 最初将是红色的。

标签： cssangularvalidationangular-material

解决方案

最简单的方法是将 matInput 与 textarea 一起使用

<mat-form-field>
  <textarea matInput ...></textarea>
</mat-form-field>

那么您将对所有输入字段具有相同的样式。并且材料将应用红色，因为它是必需的。

更难的方法是，如果您希望 textarea 具有不同的样式，可以手动将类添加到 textarea 字段。

.ts 文件：

public cleared = false;
...
clear() {
  ..
  this.cleared = true;
}

在你的 html 中：

<textarea [(ngModel)]="inputValue" [class.custom_invalid_form_class]="cleared && inputValue.length > 0"></textarea>

推荐阅读