ng-required 輸入后的紅色星號（無標簽）

Question

我正在尋找一個 CSS 規則，以在具有ng-required屬性的輸入之后應用紅色星號。

問題是，這些輸入上沒有標簽，占位符用作標簽。

例如，這 2 個輸入：

<div class="row">
    <div class="col-xs-6">
        <input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
    <div class="col-xs-6">
        <input type="text" name="CACFirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
</div>

所以我試着玩:after但沒有成功。 此外， :required僅適用於required屬性，而不適用於ng-required 。

Answer 1

我嘗試過 CSS，但選擇器似乎對輸入元素根本不起作用，而對 div 元素卻起作用。 您可以嘗試以下操作，您將看到星號插入在div而不是input ：

<div class="row">
    <div class="col-xs-6">
        <input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
    <div class="col-xs-6">
        <input type="text" name="CACirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
</div>

<div class="text-div" ng-required="true">
  TEST DIV LOOK -->
</div>

CSS：

[ng-required]:after {
  content: "*"
}

輸出：

Jsfiddle 問題的現場示例

在我看來，這是 javascript 的工作。 使用您的 html，此代碼將起作用（原生 JS）：

var form_inputs = document.getElementsByClassName('form-control')

for ( var i = 0; i < form_inputs.length; i ++ ) {
    if ( form_inputs[i].hasAttribute('ng-required') ) {
    form_inputs[i].insertAdjacentHTML('afterend', '<span style='color: red;'>*</span>');
  }
}

jsfiddle解決方案

Answer 2

這種方式對我有用，不是我想要的全部干凈，但這里是：

我將元素包裝成一個帶有class="obligatorio"的<span> 。 然后通過 ClassName 獲取所有它們，附加一個具有絕對位置的div ，“*” content => textNode和其他項目類屬性。

所以，我在 de fiels 上放了一個元素......

HTML

<span class="obligatorio"><input type="date" name="ingreso"></span>
<span class="obligatorio"><input type="time" name="lavIn"></span>

CSS

.obligatorio {
  position:relative;
}

.obligatorioItem {
  color: red;
  font-weight: 800;
  font-size: 12px;
  position: absolute;
  top:2px;
  left: 5px;
  padding: 0;
  margin: 0;
  z-index: 100;
}

Javascript 原版

var obligatorio = document.getElementsByClassName("obligatorio");

for (const element of obligatorio) {
    console.log(element);
    const nodo = document.createElement("div");
    nodo.classList.add("obligatorioItem");
    const texto = document.createTextNode("*");
    nodo.appendChild(texto);
    console.log("elemento:", element);
    element.appendChild(nodo);
}