Question

我在表单选择选项上显示不同的输入字段。但是输入验证应用于表单提交上的两个选择选项输入字段。例如：如果我选择在线选项并单击提交，它还会验证不可见的里程输入。在这里分享代码。你能帮我解决可能出错的问题。

<form class="form" name="form" role="form" ng-submit="locationsData()" novalidate>
        <div ng-repeat="address in locationsAddress.address">
            <select name="locationType" id="locationType" ng-model="locationsAddress.address[$index].type" ng-init="locationsAddress.address[$index].type = 'ONLINE'" class="form-control">
                <option value="ONLINE">Online</option>
                <option value="WORKER">Worker Address</option>
            </select>
            <div ng-if="locationsAddress.address[$index].type == 'WORKER'">
                <div style="margin: 20px 0;">
                    <label for="miles">miles you drive?</label>
                    <input type="text" name="distance{{address.id}}" id="distance" placeholder="miles you can drive?" ng-model="locationsAddress.address[$index].distance" required/>
                </div>
                <div ng-show="form.$submitted || form.distance{{address.id}}.$touched">
                    <span class="error" ng-show="form.distance{{address.id}}.$error.required">Miles you drive is required.</span>
                </div>
            </div>
            <div ng-if="locationsAddress.address[$index].type == 'ONLINE'">
                <select name="chatType{{address.id}}" ng-model="locationsAddress.address[$index].appName" required>
                    <option value="" selected="selected">App Type</option>
                    <option value="SKYPE">Skype</option>
                    <option value="WHATSAPP">WhatsAPP</option>
                </select>
                <div ng-show="form.$submitted || form.chatType{{address.id}}.$touched">
                    <span class="error" ng-show="form.chatType{{address.id}}.$error.required">Chat required.</span>
                </div>
            </div>
        </div>
        <button type="submit" class="button">Save</button>
    </form>

角度代码：

$scope.locationsAddress = {

};
$scope.locationsAddress.address = [
        {
            'id': 1,
            'type': '',
            'distance' : '',
            'appName': ''
        }
    ];
});

选择选项上的重置表单字段是否有帮助？如果是，请分享参考。

Answer 1

使用ng-form分隔ng-repeat时的表格。

<form class="form" name="form" role="form" ng-submit="locationsData()" novalidate>
    <div ng-repeat="address in locationsAddress.address">
        <ng-form name="locationForm">
        <select name="locationType" id="locationType" ng-model="address.type" ng-init="address.type = 'ONLINE'" class="form-control" ng-change="form.$setPristine();">
            <option value="ONLINE">Online</option>
            <option value="WORKER">Worker Address</option>
        </select>
        <div ng-if="address.type == 'WORKER'">
            <div style="margin: 20px 0;">
                <label for="miles">miles you drive?</label>
                <input type="text" name="distance" id="distance" placeholder="miles you can drive?" ng-model="address.distance" required/>
            </div>
            <div ng-show="form.$submitted || locationForm.distance.$touched">
                <span class="error" ng-show="locationForm.distance.$error.required">Miles you drive is required.</span>
            </div>
        </div>
        <div ng-if="address.type == 'ONLINE'">
            <select name="appName" ng-model="locationsAddress.address[$index].appName" required>
                <option value="" selected="selected">App Type</option>
                <option value="SKYPE">Skype</option>
                <option value="WHATSAPP">WhatsAPP</option>
            </select>
            <div ng-show="form.$submitted || locationForm.appName.$touched">
                <span class="error" ng-show="locationForm.appName.$error.required">Chat required.</span>
            </div>
        </div>
        </ng-form>    
    </div>
    <button type="submit" class="button">Save</button>
</form>

Plunker http://plnkr.co/edit/udwaxKohZl96GQoyFWgR

Answer 2

代码需要重构。当你可以使用angular来操纵模型时，你不应该使用jQuery：

 $scope.addAddress = function() {
    var id = 0;
    if ($scope.locationsAddress.address.length > 0) {
      id = $scope.locationsAddress.address[$scope.locationsAddress.address.length - 1].id + 1;
    } else {
      id = 1;
    }
    $scope.locationsAddress.address.push({
      id: id,
      type: 'PUBLIC'
    });
  };

 $scope.reset = function(index) {
   $scope.locationsAddress.address[index] = {
     id: $scope.locationsAddress.address[index].id,
     type: $scope.locationsAddress.address[index].type,
     appHandle: $scope.locationsAddress.address[index].appHandle
   };
   $scope.form.$setPristine();
 }

完整代码：http://plnkr.co/edit/M6PzyV?p=info

我建议您遵循John Papa's之类的Angular Best Practices，以避免此类错误。

Answer 3

只需在显示错误消息的locationsAddress.address[$index].type == 'ONLINE'中添加此ng-show条件

<div ng-show="(form.$submitted || form.distance{{address.id}}.$touched) && locationsAddress.address[$index].type == 'WORKER'">
                    <span class="error" ng-show="form.distance{{address.id}}.$error.required">Miles you drive is required.</span>
                </div>


<div ng-show="(form.$submitted || form.chatType{{address.id}}.$touched) &&  locationsAddress.address[$index].type == 'ONLINE'">
                    <span class="error" ng-show="form.chatType{{address.id}}.$error.required">Chat required.</span>
                </div>

如何在选择选项更改时重置表单字段

3 个答案: