语义 Ui 类 ui 表单破坏了 Angular2 验证答案

【问题标题】：Semantic Ui classes ui form breaks Angular2 validation语义 Ui 类 ui 表单破坏了 Angular2 验证
【发布时间】：2016-05-30 13:59:57
【问题描述】：

我在 plunker 上做了一个演示，所以问题是当添加 class="ui form" 到表单元素 angular2 验证中断时。

PLUNKER WITHOUT (class="ui form"): linkPlunker1

<form [ngFormModel]="myForm">

PLUNKER WITH (class="ui form"): linkPlunker2

<form [ngFormModel]="myForm" class="ui form">

【问题讨论】：

它们在这里的行为似乎相同。你使用的是什么浏览器？我试过 Chrome。
我用 chrome 试过了
两个 Plunker 是一样的。如果我添加我可以重现的类。
您需要在表单plnkr.co/edit/GsM5tKFooEPqkpiP8j1p?p=preview Semantic-ui.css .ui.form.error .error.message:not(:empty) { display: block } 上使用error 类
@yurzui 你应该把它作为答案。

【解决方案1】：

这只是适用的语义.css 的一个问题

.ui.form .error.message, .ui.form {
  display:none;
}

【讨论】：

我还添加了 .ng-invalid { background-color: #fff6f6 !important;边框颜色：#e0b4b4 !important; } 对于我的样式表的输入元素。你有更好的解决方案吗
对不起，我不知道 SemanticUI。我刚刚调试了一下，发现它是由 CSS 引起的，而不是由 Angular 引起的。
如果有人需要，我已经找到了更好的解决方案。 .ui.input.error 输入{背景颜色：#fff6f6！重要；边框颜色：#e0b4b4 !important; }