Javascript 如何选择设置自定义HTML属性的值？（2）

最近刚开始学习Angular 2，到目前为止，我非常喜欢它。所有这些来回的约束真的很强大，为我打开了一个全新的世界

不过，我正处于停顿状态，试图弄清楚如何设置HTML元素属性的值

我使用的样式，它有一些漂亮的表单验证消息，可以显示给用户

问题是这些消息作为值通过特定字段的

标签上的
数据错误
和
数据成功
属性传递：

<div class="input-field inline">
    <input id="email" type="email" class="validate">
    <label for="email" data-error="Invalid email address." data-success="Valid email address.">Email</label>
</div>

因此，我可以有条件地将
valid
添加到
class
属性中。这让我走了一半

我还知道，我可以添加属性，并通过以下方式为属性设置值：

[attr.data error]=“nameermsg”

因此，我尝试编写一个函数，根据报告的任何错误的状态动态设置验证消息：

nameErrMsg(): string {
  let message = '';

  if(this.myForm.controls['firstName'].hasError('required') && this.myForm.controls['firstName'].touched) {
    message = "Name is required."
  } else if (this.myForm.controls['firstName'].hasError('minlength') && this.myForm.controls['firstName'].touched) {
    message = "Name must have at least 5 characters."
  }

  return message;
}

但很明显，这只是把整个函数作为错误消息返回给我


关于如何动态设置
数据错误
属性值，有什么建议吗

如果我只是记录消息，上面的函数就可以工作，但是如何传递消息并将其设置为
数据错误
的值（例如
data error=“Name is required.”
）？
我想您缺少括号了。您实际上并没有调用该函数。所以应该是
[attr.data error]=“nameermsg（）”
我想知道Matthew的建议是否有效。出于好奇，如果您没有使用Angular，并且具有硬编码的
数据错误
属性，那么谁会显示这些消息？ECSS本身？（有点像你两次执行表单验证）@MatthewAllen我保证我不是一个十足的白痴…只是一个。是的，这绝对奏效了——谢谢你指出了这一点！“如果你想把它作为一个答案，我会接受的。”安格拉法兰西根据我在马修建议上面的评论，做到了这一点。好问题-如果我硬编码了
数据错误
属性（即使在这种情况下动态应用
数据错误
属性），则显示消息的是MaterializeCS。当一个字段具有CSS类
valid
时，Materialize将使该字段变为绿色，并显示您在
数据成功
中指定的消息，如果该字段具有类
无效
，则显示您在
数据错误
中指定的消息。我需要唯一的
数据错误
消息，这取决于违反了哪个验证，因此需要应用它dynamically@BrockKlein. 有趣。因此，Angular和MaterializeCSS在表单验证方面的功能有一点重叠。
nameErrMsg(): string {
  let message = '';

  if(this.myForm.controls['firstName'].hasError('required') && this.myForm.controls['firstName'].touched) {
    message = "Name is required."
  } else if (this.myForm.controls['firstName'].hasError('minlength') && this.myForm.controls['firstName'].touched) {
    message = "Name must have at least 5 characters."
  }

  return message;
}