重设表单在AngularJS [英] Reset Form in AngularJS

问题描述

我需要如何正确重置角度JS表单一些建议。我有我的表单数据推到了一个名为 .services 对象，但每次我打我提交时间想为形式（文字输入和复选框）复位。

我的表是这样的：

 ＆LT; D​​IV NG-应用=应用程序＆GT;
    ＆LT; D​​IV NG控制器=MainCtrl＆GT;
        ＆LT;形式的作用=形式NG提交=的CreateService（newService）＆GT;
            ＆LT; D​​IV CLASS =表单组＆GT;
                ＆LT;标签=服务名＆GT;服务与LT的名称; /标签＆gt;
                ＆LT;输入ID =服务名类型=文本NG模型=newService.name＆GT;
            ＆LT; / DIV＆GT;
            ＆LT;标签NG重复=部门行业为={{部门}}＆GT;
                ＆LT;输入类型=复选框ID ={{部门}}VALUE ={{部门}}NG模型=newService.sectors [板块]＆GT; {{部门}}＆LT; /标签＆gt;
            ＆LT;按钮式=提交级=BTN BTN-默认＆GT;提交＆LT; /按钮＆GT;
        ＆LT; /表及GT;
        ＆lt;节类=行以及在线 -  preVIEWNG重复=服务服务＆GT;
             ＆所述; H3＆GT;＆下; A HREF =/＆GT; {{service.name}}＆下; / A＆GT;＆下; / H3＆GT;            ＆LT; UL类=列表的无样式＆GT;
                ＆LT;李NG重复=（部门，国家）的service.sectors＆GT; ＆LT;跨度类=标签标签主要NG-秀=状态＆GT; {{}部门}＆LT; / SPAN＆GT;
                ＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ＆LT; /节＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和我的JS：

  angular.module（应用，[]）
    .controller（'MainCtrl'，函数（$范围）{    $ scope.sectors = ['健康'，'社会'，'教育'];
    $ scope.services = [{
        '名'：'疝修补术，
            '部门'：{
            健康：真实
        }
    }，{
        '名'：'癌症'，
            '部门'：{
            健康：真实，
            社会：真实，
            教育：真实
        }
    }];    功能的CreateService（服务）{
        $ scope.services.push（服务）;
    }    $ scope.createService = CreateService函数;
}）;
 

我试图创建设置 A resetForm（）函数名称和行业为空字符串，但后来我有那里的复选框的提交值没有被正确地设置一些奇怪的问题。

任何帮助，这是AP preciated。

先谢谢了。

更新：

应该是这样的工作？

 函数resetForm（）{
    $ scope.newService = {
        名称： ''，
        部门：{}
    };
}
 

解决方案

你试过给人的形式名称，然后调用$ setPristine（）？

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

I need some advice on how to properly reset a form in Angular JS. I'm having my form's data pushed to a object called .services, but every time I hit submit I would like for that form (text input and checkboxes) to be reset.

My form looks like this:

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

And my 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;
});

I tried creating a resetForm() function that sets the name and sector to empty strings, but then I was having some weird problems where the submitted values of the checkboxes weren't being properly set.

Any help with this is appreciated.

Thanks in advance.

Updated:

Would something like this work?

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

解决方案

Have you tried giving the form a name then calling $setPristine()?

Then call $scope.serviceForm.$setPristine();

这篇关于重设表单在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！