必填字段的 Angular2 视觉提示

Question

我有以下标记

.html

  <div
      class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-group">
    <input
        required
        type = "text"
        pattern = "{{regex}}"
        [(ngModel)] = "name.first"
        ngControl = "first"
        #first = "ngForm"
        class = "mdl-textfield__input form-control"
        id = "first">
    <label
        class = "mdl-textfield__label"
        for = "first">First</label>
    <span *ngIf = "showErrorMsg()"
          class =
              "mdl-textfield__error">{{msg}}</span>
  </div>

Angular2(和 Angular2-dart)是否有任何内置视觉提示来向用户表明该字段是必填字段？

谢谢

Answer 1

表单初始化时您提到的提示是原始状态。表单字段可以有 3 种状态:触摸/未触摸、原始/脏和有效/无效。

您必须同时使用这 3 种方法才能获得您想要的造型效果。例如:

form input.ng-invalid, form input.ng-pristine.ng-invalid:focus {
  border: 1px solid red;
}

form input.ng-pristine {
    border: 1px solid dimgrey;
}

这会导致表单开始时(原始)的所有字段都变成灰色(正常颜色)。如果用户触摸该字段及其所需字段，它将呈红色。但如果用户立即点击离开而不编辑该字段，该字段将变为灰色。

如果用户键入一个值，但该字段仍然无效，即使用户单击离开，该字段仍将保持红色。这是使用这些样式的更直观的方式。在开始时将所有内容标记为无效，或者仅仅因为用户触摸了某个字段就将其标记为红色，这并不是一个良好的用户体验。

检查此运行 code example这种造型的实际效果。