在 AngularJs 中验证自定义指令（我想让它成为必需的）

Question

我在使用 AngularJS 验证表单中的自定义指令时遇到问题。我创建的指令称为 switcher，它被放入一个表单 ChoixController 表单中。

代码是这样的：

    <form id="choixContext"  name="choixContext" ng-submit="choixController.save(choixContext)">
<label for="choixDevis">Choice of Devis </label>
 <switcher name="choixDevis" id="choixDevis" grid="'grid-3-small-3-tiny-1'" values="choixContextContrat" model="codeChoix"/>
    <div class="msg-error-input"
         ng-if="!codeChoix"
         ng-messages="choixContext['codeChoix'].$error"
         role="alert">
        <div class="icon icon-mobile-attention-carre" ng-message="required">
            Erreur !
        </div>
    </div>
<button type="submit">Submit</button>
    </form>

我该怎么做？我希望该指令是必需的。用户必须在提交前选择点击指令。

这是指令的 HTML 代码：

<div class="switcher {{grid}}" ng-cloak>
    <label class="switch {{item.class}}"
         data-ng-repeat="item in values">
        <input name="{{name}}" type="radio" value="{{item.code}}" ng-model="$parent.model">
        <span class="switch-data">
            <span class="icon {{item.icon}}" data-ng-if="item.icon"></span>
            <span class="switcher-libelle" data-ng-bind-html="item.libelle"></span>
        </span>
    </label>
    <label class="switch switch-other" data-ng-if="otherRadio">
        <input id="{{otherRadioId}}" name="{{name}}" type="radio" value="{{otherRadioValue}}" ng-model="$parent.model">
        <span class="switch-data" data-ng-bind-html="otherRadioLibelle"></span>
    </label>
</div>

Answer 1

据我所知，角度形式只会将 input select textarea 添加到他的有效性系统中。

解决这个问题的一个简单方法是创建一个隐藏输入：

<input name="monChoix" type="hidden" ng-model="codeChoix" required />
 <div class="msg-error-input"
     ng-if="!codeChoix"
     ng-messages="choixContext['monChoix'].$error"
     role="alert">
    <div class="icon icon-macif-mobile-attention-carre" ng-message="required">
        Erreur !
    </div>
</div>

另请注意，在您的 ng-messages 中必须匹配的是输入名称，而不是您存储值的变量名称。这就是为什么我将其重命名为 monChoix 以便您更好地看到链接。

Answer 2

更好的选择是使用 ng-message。接下来您需要在<switcher /> 上执行此操作：

• 更改 ng-model 的模型
• 需要添加属性

接下来，您需要添加 ng-messages：

<div ng-messages="choixContext.choixDevis.$error" role="alert">
  <div ng-message="required">You did not enter a field</div>
</div>

更多信息： https://docs.angularjs.org/api/ngMessages/directive/ngMessages

如果您需要更多帮助，请做一个 plunker。