Question

我需要一些关于如何在Angular JS中正确重置表单的建议。我将表单的数据推送到名为.services的对象，但每次点击提交时，我都希望重置该表单（文本输入和复选框）。

我的表单如下：

<div ng-app="app">
    <div ng-controller="MainCtrl">
        <form role="form" ng-submit="createService(newService)">
            <div class="form-group">
                <label for="serviceName">Name of Service</label>
                <input id="serviceName" type="text" ng-model="newService.name">
            </div>
            <label ng-repeat="sector in sectors" for="{{sector}}">
                <input type="checkbox" id="{{sector}}" value="{{sector}}" ng-model="newService.sectors[sector]">{{sector}}</label>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <section class="row well live-preview" ng-repeat="service in services">
             <h3><a href="/">{{service.name}}</a></h3>

            <ul class="list-unstyled">
                <li ng-repeat="(sector, state) in service.sectors"> <span class="label label-primary" ng-show="state">{{sector}}</span>
                </li>
            </ul>
        </section>
    </div>
</div>

我的JS：

angular.module('app', [])
    .controller('MainCtrl', function ($scope) {

    $scope.sectors = ['health', 'social', 'education'];
    $scope.services = [{
        'name': 'Hernia Repair',
            'sectors': {
            'health': true
        }
    }, {
        'name': 'Cancers',
            'sectors': {
            'health': true,
            'social': true,
            'education': true
        }
    }];

    function createService(service) {
        $scope.services.push(service);
    }

    $scope.createService = createService;
});

我尝试创建一个resetForm()函数，将name和sector设置为空字符串，但后来我遇到了一些奇怪的问题，其中复选框的提交值不是＆＃39;正确设置。

对此有任何帮助表示赞赏。

提前致谢。

更新

这样的事情会起作用吗？

function resetForm() {
    $scope.newService = {
        name: '',
        sector: {}
    };
}

Answer 1

您是否尝试过为表单命名，然后调用$ setPristine（）？

然后调用$ scope.serviceForm。$ setPristine（）;

Answer 2

为什么要将其设置为空字符串？将新服务设置为空对象。您正在使用ng-model，它应该能够为您设置密钥和值。除非您想要复选框的默认值，否则您可以在其中将默认值设置为具有默认值的对象。

在AngularJS中重置表单

2 个答案: