2

我有以下标记

.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）是否有任何内置的视觉提示来向用户指示需要一个字段？

谢谢

4

1 回答 1

2

您在表单初始化时提到的提示是原始状态。表单域可以有 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;
}

这会导致表单开始（原始）时的所有字段为灰色（正常颜色）。如果用户触摸该字段及其必填项，它将是红色的。但是，如果用户立即点击离开而不编辑该字段，它将变为灰色。

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

检查此样式的运行代码示例。

于 2016-01-15T20:12:55.113 回答