角度表单验证：如何覆盖$ invalid

Question

<div class="col-xs-7">
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="settings.input">
        checked
      </label>
    </div>
    <div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''">
      <input type="number" class="form-control input-sm" id="inputEmail3" name="input" ng-model="settings.input" placeholder="if checked, then do validation" required min="0">
      <span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </div>
  </div>

demo here

我的问题是，当我为required设置input时，form.$valid将 false ，但我想要的只是{{1} }} 选中，然后执行checkbox验证，因此，如果未选中，即使input为空，input的值也应为 true < / strong>

我的目的是覆盖form.$valid的{​​{1}}，如何覆盖？

Answer 1

表单字段变得无效，因为您在输入字段上需要属性，因此每次将表单输入字段视为必需时。您可以做的是，您应该通过required输入ng-required指令来有条件地在表单字段上添加expression属性。

<强>标记

<div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''">
  <input type="number" class="form-control input-sm" id="inputEmail3" name="input" 
     ng-model="settings.input" placeholder="if checked, then do validation" 
     ng-required="settings.input" min="0"/>
  <span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback" 
   aria-hidden="true"></span>
</div>

Forked Plunkr

Answer 2

Angular具有ng-required指令，允许使用表达式启用必需属性。使用以下内容替换required=""上的input：

ng-required="settings.checked"

Live example