角度驗證可顯示提交時的所有錯誤

Question

我有一個簡單的示例表單，該表單將驗證必填名稱和至少3個字母。 在使字段變臟時很好地顯示錯誤：

但是，當用戶按下“提交”按鈕時，我們的設計師希望所有為空且“ 必需 ”也變為“ 紅色 ”的字段。 現在，除非他們觸摸並使字段“變臟”，否則驗證不會將字段變為紅色。

當然，只有在他們提交表單或使字段變臟之后，該字段才應該以紅色開頭。

jQueryValidate.org做到了這一點，所以這也是他們在Angular中想要的。

Answer 1

我遇到了同樣的要求，並通過在我的控制器的作用域上添加一個布爾值來表示表單是否已提交， formSubmitted

在表單提交方法中，我將formSubmitted的值設置為true

然后，我將在需要的地方動態添加一個類：

<div ng-class="{'required-error': formSubmitted && formName.field.$error.required}">
    <input name="field" required/>
</div>

Answer 2

您還可以將此https://github.com/AngularAgility/AngularAgility用於Toster中的所有控件和錯誤摘要。 驗證並專注於引起驗證的領域的最佳方法。