我在我的 Angular 表单中添加了一个文本区域。所有输入/垫选择字段都可以使用所需的属性。对于textarea，我添加了一个自定义类来显示红色边框。出于某种原因，当我单击清除按钮时，两个输入字段会自动应用其自己的红色类，但我的 texareaa 自定义类不会，除非它已被触摸。这很好，但与输入字段的样式不匹配。如何将相同的验证样式应用于文本区域：https://stackblitz.com/edit/angular-mpefsn
.text-error.ng-invalid.ng-touched{
border: 1px solid #b00b00;
}
如果您在堆栈闪电战加载时最初单击清除按钮，您将看到两个输入字段变为红色，但不是 textarea。这是因为我有 ngtouched 类。但是如果我删除它，那么 textarea 最初会是红色的。
【问题讨论】：
标签： css angular validation angular-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>
【讨论】：
点击清除按钮时，您可以将textarea form control 标记为touched：
<textarea #txt="ngModel" [(ngModel)]="questionText" required ...></textarea>
<button (click)="clear(); txt.control.markAsTouched();" ...>Clear</button>
请参阅this stackblitz 以获取演示。
【讨论】：
.ts 文件中触摸？
ngModel 或FormControl 传递给事件处理程序：(click)="clear(txt.control)"，并在方法内调用markAsTouched。另一种可能性是使用@ViewChild 引用textarea。
您在此处看到除textarea 之外的其他字段的红色边框的原因是因为其他字段正在从.mat-form-field-invalid 获取它们的CSS。 .mat-form-field-invalid 会添加到您的 mat-form-field 中，因为此类会在您提交表单而不填写必填字段时添加。
因此，对您的 textarea 执行相同操作，删除不需要的 text-error 类并添加 matInput 指令。然后只需将您的textarea 包装在mat-form-field 中，如下所示
<mat-form-field>
<textarea matInput name="questionText" cols="35" rows="8" placeholder="Question Text" [(ngModel)]="questionText" required></textarea>
</mat-form-field>
这是StackBlitz 上的一个工作示例。
【讨论】：
mat-form-field must contain a MatFormFieldControl.你有工作的stackblizt吗
textarea，它不包含边框。
textarea 的样子:)
使用
<ion-textarea></ion-textarea>
代替原生
<textarea></textarea>
为了查看验证结果，如
<ion-input></ion-input>
【讨论】：