• 用户的视觉提示

    用户的视觉提示

    HTML5为其输入字段提供:invalid和:valid伪选择器。

    1. input[type="text"]:valid {
    2.   border: 2px solid green;
    3. }
    5. input[type="text"]:invalid {
    6.   border: 2px solid red;
    7. }

    不幸的是，这个系统是作用有限，并且将需要更多的操作，才能处理复杂的形式或用户行为。

    Angular 2不是编写额外的代码，而是创建和实施自己的CSS类，以管理这些行为，为您提供了几个样式类，已经可以在inputs上使用。

    1. /* field value is valid */
    2. .ng-valid {}
    4. /* field value is invalid */
    5. .ng-invalid {}
    7. /* field has not been clicked in, tapped on, or tabbed over */
    8. .ng-untouched {}
    10. /* field has been previously entered */
    11. .ng-touched {}
    13. /* field value is unchanged from the default value */
    14. .ng-pristine {}
    16. /* field value has been modified from the default */
    17. .ng-dirty {}

    记住三对状态：

    • valid / invalid
    • untouched / touched
    • pristine / dirty

    这些对可以在您的CSS中使用许多组合，以根据它们代表的三个独立的标志来改变样式。 当输入的状态改变时，Angular将在每个输入上的对之间切换。