用户的视觉提示

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将在每个输入上的对之间切换。