必填字段的 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 种状态：touched/untouched、pristine/dirty 和 valid/invalid.

您必须同时使用所有 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。

必填字段的 Angular2 视觉提示

Angular2 visual cues for required fields

angular2-forms

angular

.html