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

Posted 2023-02-25

【中文标题】语义 Ui 类 ui 表单破坏了 Angular2 验证

【英文标题】：Semantic Ui classes ui form breaks Angular2 validation

【发布时间】：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;