在 AngularJS 中重置表单

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 设置为空字符串，但随后我遇到了一些奇怪的问题，即未正确设置复选框的提交值。

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

提前致谢。

更新：

这样的东西有用吗？

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

Answer 1

您是否尝试过为表单命名然后调用 $setPristine()？

然后调用$scope.serviceForm.$setPristine();

Answer 2

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