文本區域上的模板驅動表單驗證

Question

我在我的角度表單中添加了一個文本區域。 所有 input/mat-select 字段都可以與 requried 屬性一起正常工作。 對於textarea我添加了一個自定義類來顯示紅色邊框。 出於某種原因，當我單擊清除按鈕時，兩個輸入字段會自動應用其自己的紅色類，但我的texarea a 自定義類不會，除非它已被觸摸。 這很好，但與輸入字段的樣式不匹配。 如何將相同的驗證樣式應用於文本區域： https : //stackblitz.com/edit/angular-mpefs​​n

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

如果您在堆棧閃電戰加載時最初單擊清除按鈕，您將看到兩個輸入字段變為紅色，但不是textarea 。 這是因為我有ngtouched類。 但是如果我刪除它，那么 textarea 最初將是紅色的。

Answer 1

最簡單的方法是將 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>

Answer 2

單擊清除按鈕時，您可以將textarea表單控件標記為已touched ：

<textarea #txt="ngModel" [(ngModel)]="questionText" required ...></textarea>

<button (click)="clear(); txt.control.markAsTouched();" ...>Clear</button>

有關演示，請參閱此 stackblitz 。

Answer 3

您在此處看到除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上的一個工作示例。

Answer 4

使用

<ion-textarea></ion-textarea>

而不是本地人

<textarea></textarea>

為了查看驗證結果，例如

<ion-input></ion-input>