附加验证范围以更正输入

问题描述 投票:0回答:1

我在循环中显示输入。对于每一个我想要附加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是唯一的。

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

angularjs
1个回答
1
投票

name<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>

ng-show指令采用Angular表达式而不进行插值。

© www.soinside.com 2019 - 2024. All rights reserved.