角模型更新，即使值無效

我新的角度和嘗試的表單驗證，當我遇到以下情形傳來：角模型更新，即使值無效

設置：我有一個「要求」在我的形式，這勢必會現場一個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

角模型更新，即使值無效

回答

相關問題