附加验证范围以更正输入

时间:2018-05-16 02:08:00

标签: angularjs

我在循环中显示输入。对于每一个我想要附加3个跨度,这些跨度表示“需要”,“太短”,“太长”。我这样做了:

<form name="sellItem">
<div data-ng-repeat="n in langInput.values" style="margin-top: 100px; background: white; color: white">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
        <label class="sell__label" for="auction_name_account_{{n.selected}}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
        <div>
            <input type="text"
                   id="auction_name_account_{{n.selected}}"
                   class="form-control"
                   name="auction_name_account[$index]"
                   data-ng-model="inputs.auction_name_account[$index]"
                   data-ng-minlength="10"
                   data-ng-maxlength="60"
                   required />
            <span class="sell__input-text sell__input-text--big-input"
                  data-ng-show="sellItem.auction_name_account[$index].$error.required">Wymagane!</span>
            <span class="sell__input-text sell__input-text--big-input"
                  data-ng-show="sellItem.auction_name_account[$index].$error.minlength">Za krótkie!</span>
            <span class="sell__input-text sell__input-text--big-input"
                  data-ng-show="sellItem.auction_name_account[$index].$error.maxlength">Za długie!</span>
            {{ inputs }}
        </div>
    </div>
</div>
</form>

但是跨度根本没有表现出来。我正在循环的值是:

$scope.langInput = {
        values: [
            {
                id: "1",
                selected: "pl"
            },
            {
                id: "2",
                selected: "eng"
            }
        ],

我也在初学化数组

    $scope.inputs = {
        auction_name_account: []
    };

确保ng-model是唯一的。

如何将验证范围附加到正确的输入?就像我说的跨度根本没有显示。

1 个答案:

答案 0 :(得分:1)

name的{​​{1}}属性需要使用插值<input>

{{ }}

<form name="sellItem"> <div data-ng-repeat="n in langInput.values" style="margin-top: 100px; background: white; color: white"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding"> <label class="sell__label" for="auction_name_account_{{n.selected}}">Główna nazwa Twojej aukcji ({{n.selected }}):</label> <div> <input type="text" id="auction_name_account_{{n.selected}}" class="form-control" ̶n̶a̶m̶e̶=̶"̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶"̶ name="auction_name_account_{{$index}}" data-ng-model="inputs.auction_name_account[$index]" data-ng-minlength="10" data-ng-maxlength="60" required /> <span class="sell__input-text sell__input-text--big-input" ̶d̶a̶t̶a̶-̶n̶g̶-̶s̶h̶o̶w̶=̶"̶s̶e̶l̶l̶I̶t̶e̶m̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶.̶$̶e̶r̶r̶o̶r̶.̶r̶e̶q̶u̶i̶r̶e̶d̶"̶>̶W̶y̶m̶a̶g̶a̶n̶e̶!̶<̶/̶s̶p̶a̶n̶>̶ data-ng-show="sellItem['auction_name_account_'+$index].$error.required">Wymagane!</span> <span class="sell__input-text sell__input-text--big-input" ̶d̶a̶t̶a̶-̶n̶g̶-̶s̶h̶o̶w̶=̶"̶s̶e̶l̶l̶I̶t̶e̶m̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶.̶$̶e̶r̶r̶o̶r̶.̶m̶i̶n̶l̶e̶n̶g̶t̶h̶"̶>̶Z̶a̶ ̶k̶r̶ó̶t̶k̶i̶e̶!̶<̶/̶s̶p̶a̶n̶>̶ data-ng-show="sellItem['auction_name_account_'+$index].$error.minlength">Za krótkie!</span> <span class="sell__input-text sell__input-text--big-input" ̶d̶a̶t̶a̶-̶n̶g̶-̶s̶h̶o̶w̶=̶"̶s̶e̶l̶l̶I̶t̶e̶m̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶.$̶e̶r̶r̶o̶r̶.̶m̶a̶x̶l̶e̶n̶g̶t̶h̶"̶>̶Z̶a̶ ̶d̶ł̶u̶g̶i̶e̶!̶<̶/̶s̶p̶a̶n̶>̶ data-ng-show="sellItem['auction_name_account_'+$index].$error.maxlength">Za długie</span> {{ inputs }} </div> </div> </div> </form> 指令采用Angular表达式而不插值。