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

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>

Angular 代码:

$scope.locationsAddress = {

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

在选择选项上重置表单字段是否有帮助？如果是，请分享引用。

Answer 1

在 ng-repeat 下使用 ng-form 来分隔表单。

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

笨蛋http://plnkr.co/edit/udwaxKohZl96GQoyFWgR