FormData не меняется с ngChange крючком

Question

У меня есть очень простой сценарий, в котором, в котором у меня есть модуль с одним контроллером :

var myModule = angular.module('myModule', []); 

myModule.controller('myModuleCtrl', function ($scope, $http) { 
    $scope.formData = {url:'',title:'',source:''}; 

    $scope.init = function() { 
     $scope.formData.url = 'Test'; 
     $scope.formData.title = ''; 
     $scope.formData.source = ''; 
    }; 

    $scope.manageUrl = function() { 
     alert('update'); 
    }; 
}); 

На мой взгляд, я пытаюсь зацепить formData свойства объекта в поля какой-либо формы, используя ngModel. Однако мой ввод не обновляет его значение после запуска метода init(). Если я добавлю директиву ngChange и подключу ее с помощью метода $scope.manageUrl(), он запускает только после после моего первого нажатия клавиши/изменения ввода.

Я что-то пропустил? Я использовал обе директивы раньше, без каких-либо проблем. Единственное, что я могу придумать, это что-то не так с моей настройкой модуля/контроллера?

Это то, что мой вид выглядит следующим образом:

<div ng-app="myApp" ng-controller="myModuleCtrl" ng-init="init()"> 
    <div> 
     <form name="myForm"> 
      <div> 
       <input type="url" ng-model="formData.url" ng-change="manageUrl()" /> 
      </div> 
     </form> 
    </div> 
</div> 

И мои application.js Загрузчик:

var app = angular.module('myApp', ['myModule']); 

Answer 1

Это происходит из-за URL-адрес валидатор, обратите внимание, как в целом Свойство url удаляется до тех пор, пока вы не введете действующий URL-адрес, и тогда вы снова начнете получать свои предупреждения. В принципе, после удаления URL-адрес никогда не считается измененным до ввода действительного (и другого) URL-адреса.

• URL установлен в «Test»
• вы печатаете что-нибудь в поле, оно не проходит проверку и становится неопределенным
• он остается неопределенным, пока не будет введен правильный URL (это не меняется)

Начните ввод http://anything и посмотреть, что происходит себя:

var myModule = angular.module('myModule', []); 
 

 
myModule.controller('myModuleCtrl', function ($scope, $http) { 
 
    $scope.formData = {url:'',title:'',source:''}; 
 
    $scope.init = function() { 
 
     $scope.formData.url = 'Test'; 
 
     $scope.formData.title = ''; 
 
     $scope.formData.source = ''; 
 
    }; 
 

 
    $scope.manageUrl = function() { 
 
     alert('update'); 
 
    }; 
 
}); 
 

 
var app = angular.module('myApp', ['myModule']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myModuleCtrl" ng-init="init()"> 
 
    <div> 
 
     <form name="myForm"> 
 
      <div> 
 
       <input type="url" ng-model="formData.url" ng-change="manageUrl()" /> 
 
       
 
       <br> 
 
       {{formData}} 
 
      </div> 
 
     </form> 
 
    </div> 
 
</div>

---

Я пропускаю что-то здесь? Я использовал обе директивы раньше, без каких-либо проблем. Единственное, что я могу придумать, это что-то не так с моей настройкой модуля/контроллера?

Единственное логическое решение, которое приходит мне на ум, заключается в том, что раньше вы использовали другой тип ввода, поэтому вы не поддавались проверке. Если вы измените тип на text, он работает отлично все время.