AngularJS不正确的手柄按钮类型= QUOT;复位＆QUOT;？ [英] AngularJS does not proper handle button type="reset"?

问题描述

我有以下内容：

 ＆LT;表格名称=编辑器＆GT;
    ＆LT; H2＆GT;创建/更新＆LT; / H＆GT;
    {{editor.title。$ error.required}}
    ＆LT; D​​IV纳克级={'有错误：editor.title $无效和放大器;＆安培; editor.title $脏，'有-成功：。editor.title $有效}级=形式-group＆GT;
        ＆LT;输入类型=文本名称=标题NG模型=project.title占位符=头衔必修课=表格控＆GT;
        ＆LT;跨度类=输入图标成奎安检查反转NG秀=$ editor.title有效。＆GT;＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
    {{editor.description。$ error.required}}
    ＆LT; D​​IV纳克级={'有错误：editor.description $无效和放大器;＆安培; editor.description $脏，'有-成功：。editor.description $有效}级=形式-group＆GT;
        ＆LT; textarea的名字=描述NG模型=project.description占位符=说明所需的类=表格控＆GT;＆LT; / textarea的＆GT;
        ＆LT;跨度类=输入图标成奎安检查反转NG秀=$ editor.description有效。＆GT;＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;按钮NG点击=保存（）类型=提交级=BTN BTN-主要BTN-浮雕＆GT;保存＆LT; /按钮＆GT;
    ＆LT;按钮式=复位级=BTN BTN-逆＆GT;复位＆LT; /按钮＆GT;
    ＆LT; A HREF =＃/＆GT;返回＆LT; / A＆GT;
＆LT; /表及GT;
 

我遵循角网站主页。我已经添加了复位键detail.html。的问题是它的行为。当我清理我自己的字段，验证失败，但是当我点击复位按钮，字段被清理，但形式剩余有效。
那是一个棱角分明的错误？而如何把它修好？

解决方案

我相信你要找的是什么 $ setPristine（）;

  

$ setPristine（）;

  
  

设定的形式，它的原始状态。

  
  

此方法可以被调用，以删除'NG-脏'类和表单设置为它的原始状态（NG-原始类）。这种方法也将传播到本表格所载的所有控制。

  
  

设置形式返回到原始状态往往是有用的，当我们要保存或重置后'再利用'的形式。

  
  

的 http://docs.angularjs.org/api/纳克/类型/ form.FormController 的

例JS

  $ scope.data = {
    用户名： ，
    密码：
};$ scope.reset =功能（）{
  $ scope.data.username =;
  $ scope.data.password =;
  。$ scope.form $ setPristine（）;
};
 

标记示例

 ＆LT;表格名称=形式ID =形式的novalidate＆GT;
        ＆LT;输入名称=用户名NG模型=data.username占位符=姓名要求/＆GT;
        ＆LT;输入名称=密码NG模型=data.password占位符=密码类型=所需的密码/＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;小时/＆GT;
            ＆LT;按钮类=按钮NG点击=＆GT;登录和LT; /按钮＆GT;
            ＆LT;按钮类=按钮NG点击=reset（）的＆GT;复位＆LT; /按钮＆GT;
        ＆LT; / DIV＆GT;
＆LT; /表及GT;
 

http://plnkr.co/edit/xTQLQH8mCCkY0tIX6n8Y?p=$p $ PVIEW

---

更新：简化的解决方案

如果您希望与控制器的功能做掉复位（），你可以设置键入=复位如最初完成，但的还是的需要 $ setPristine（）在 NG-点击

 ＆LT;按钮类=按钮类型=复位NG点击=形式$ setPristine（）。＆GT;复位＆LT; /按钮＆GT;
 

新普拉克： http://plnkr.co/edit/tNKPyyMboAQjeURn6m6W?p= preVIEW

I have the following:

<form name="editor">
    <h2>Create/Update</h2>
    {{ editor.title.$error.required }}
    <div ng-class="{ 'has-error': editor.title.$invalid && editor.title.$dirty, 'has-success': editor.title.$valid }" class="form-group">
        <input type="text" name="title" ng-model="project.title" placeholder="title" required class="form-control">
        <span class="input-icon fui-check-inverted" ng-show="editor.title.$valid"></span>
    </div>
    {{ editor.description.$error.required }}
    <div ng-class="{ 'has-error': editor.description.$invalid && editor.description.$dirty, 'has-success': editor.description.$valid }" class="form-group">
        <textarea name="description" ng-model="project.description" placeholder="description" required class="form-control"></textarea>
        <span class="input-icon fui-check-inverted" ng-show="editor.description.$valid"></span>
    </div>
    <button ng-click="save()" type="submit" class="btn btn-primary btn-embossed">Save</button>
    <button type="reset" class="btn btn-inverse">Reset</button>
    <a href="#/">Back</a>
</form>

I follow "JavaScript Projects" tutorial on angular website main page. I've added reset button to detail.html. The problem is it's behavior. When I cleaning fields by myself, the validation fails, but when I click on the reset button, fields are cleaning up but the form remaining valid. Is that an angular bug? And how get it fixed?

解决方案

I believe what you're looking for is $setPristine();

$setPristine();

Sets the form to its pristine state.

This method can be called to remove the 'ng-dirty' class and set the form to its pristine state (ng-pristine class). This method will also propagate to all the controls contained in this form.

Setting a form back to a pristine state is often useful when we want to 'reuse' a form after saving or resetting it.

via http://docs.angularjs.org/api/ng/type/form.FormController

Example JS

$scope.data = {
    "username": "", 
    "password" : ""
};

$scope.reset = function() {
  $scope.data.username = "";
  $scope.data.password = "";
  $scope.form.$setPristine();
};

Example Markup

<form name="form" id="form" novalidate>
        <input name="username" ng-model="data.username" placeholder="Name" required/>
        <input name="password" ng-model="data.password" placeholder="Password" type="password" required/>
        <div>
            <hr />
            <button class="button" ng-click="">Login</button>
            <button class="button" ng-click="reset()">Reset</button>
        </div>
</form>

Demo http://plnkr.co/edit/xTQLQH8mCCkY0tIX6n8Y?p=preview

---

Update : simplified solution

If you wish to do away with the controller function reset(), you could set type="reset" as originally done, but still need to $setPristine() on ng-click

<button class="button" type="reset" ng-click="form.$setPristine()">Reset</button>

new plunk: http://plnkr.co/edit/tNKPyyMboAQjeURn6m6W?p=preview

这篇关于AngularJS不正确的手柄按钮类型= QUOT;复位＆QUOT;？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！