Question

这似乎很常见，但它的解决方案似乎很复杂。

我的表格中有一部分是可选的。如果启用，则其字段是必需的。

<!-- begin optional section -->
<label>
    <h4>Trailer </h4> 
    <span>( optional </span>
    <input class="input-inline" ng-model="hasTrailer" type="checkbox"/> 
    <span>)</span> 
    <h4 style="display: inline"> :</h4>
</label> 


<div class="form-group">
    <label for="trailerNumber"> Number:</label>
    <div>
        <input 
         type="text" 
         name="trailerNumber" 
         ng-disabled="!hasTrailer" 
         ng-model="vm.Manifest.Trailer.number" 
         required />
    </div>
    <div>
        <div 
             class="error-message" 
             ng-show="hasTrailer && form.trailerNumber.$invalid && form.trailerNumber.$touched || form.submitted">
            <span> Trailer Number is required.</span >
        </div>
    </div>             
</div>
<!-- end optional section -->

因此，在该部分的顶部有一个复选框，其模型为＆＃39;预告片＆＃39;。如果选中，则字段是必填字段。

我真正想要的是理想的：

<input type="text" required="hasTrailer">

或者

<input type="text" ng-attr({'required':hasTrailer})

即。 if hasTrailer === true则required = true

Answer 1

您可以使用ng-required指令，当指定的表达式变为true时，它将有条件地输入required。

<input type="text" ng-required="hasTrailer">

Answer 2

您可以使用ngRequired实现这一目标。你可以阅读它here

它基本上在html元素中使用

<input type="text" ng-required="hasTrailer">

hasTrailer 应该是范围内的布尔属性。

Answer 3

我准备使用这个选项，它做同样的事情，但另外使整个部分消失。

<div ng-if="hasTrailer">
    <!-- all my optional fields-->
</div>

Angular bootstrap条件必需的字段

3 个答案: