角模型更新，即使值无效

我新的角度和尝试的表单验证，当我遇到以下情形传来：角模型更新，即使值无效

设置：我有一个“要求”在我的形式，这势必会现场一个ng模型并且有一个默认值，还有一个重置按钮。我在para标签中打印它的值。

问题

现在，当我从外地删除值，我对标签得到更新，即使这个值是无效的空（没有值）。所以我的问题是，即使新值无效，为什么我的型号值更新了。
此外，当我点击重置时，该字段被重置，但窗体的有效状态仍然为真，型号也未更新。这是为什么？

下面是代码：http://plnkr.co/edit/fqczGwbponOW0kgs23Jn?p=preview

<form name="testForm"> 
     <label>Name:</label> 
     <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required> 
     <input type="reset" /> 
     <p>Is form valid : {{testForm.$valid}}</p> 
    </form> 
    <p>Hello {{yourName}}!</p>

来源

2016-06-13 Himanshu Tyagi

第二部分尝试使用this.' ' –

@SSH但为什么需要？ Angular将模型绑定到视图，因此视图中的任何更新都应该自动更新模型。 –

这是因为复位超出角JS的范围。 AngularJS模型不知道使用重置更新输入值，除非您明确告诉它。

您可以检查我的回答这个问题作进一步参考： Angular model doesn't update when changing input programmatically

你也可以解决你的代码为：

<form name="testForm"> 
     <label>Name:</label> 
     {{yourName}} 
     <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required> 
     <input type="reset" ng-click="yourName = ''"/> 
     <p>Is form valid : {{testForm.$valid}}</p> 
    </form>

来源

2016-06-13 07:41:11

问题1呢？ –

我没有得到你的第一个问题。你的段落标记在哪里获得空值？ –

我的意思是，AFAIK，角度模型只在新值有效时更新，此处文本框为必填字段，因此空白值为*无效*因此，删除文本时不应将模型更新为**空白**从文本框（通过使用backspace或del）。 –

我将创建谁清除数据的一个功能：一个plunker http://plnkr.co/edit/YfCrTJNpYGOuNd7GgAgT?p=preview

控制器：

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

    $scope.yourName = 'Sam' ; 
    $scope.delete = function(){ 
    $scope.yourName = null ; 
} 
});

HTML

<body ng-controller="MainCtrl"> 
    <div> 
    <form name="testForm"> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here" required> 
     <button ng-click="delete()">delete</button> 
     <p>Is form valid : {{testForm.$valid}}</p> 
    </form> 
    <p>Hello {{yourName}}!</p> 
    </div> 
</body>

来源

2016-06-13 07:49:13 AlainIb

那么问题1呢？ –

“required”选项只在字段为空时无效，并不意味着输入在任何操作中都不能为空。当您将其设置为空时它不会阻止您。你可以例如用'' – AlainIb

阻止提交按钮为什么reset不工作？ –

这是因为不同的作用域。使用上述方法重置表单时，范围完全不受影响。所以，即使再次使用$ scope。$ apply（）来运行digest循环，它也不会起作用，因为范围完全不受您重置表单数据的方式的影响。

来源

2016-06-13 09:13:09 Rohit

角模型更新，即使值无效

回答

相关问题