ng-model vs ngModel - breaks form

Question

Новое для углового, нового для жизни:

У меня есть небольшая электронная почта.

Это работает:

<form method="post" name="form" role="form" ng-controller="contactForm" ng-submit="form.$valid && sendMessage(input)" novalidate class="form-horizontal"> 
     <p ng-show="success"><b>We received your message</b></p> 
     <p ng-show="error">Something wrong happened!, please try again.</p> 

       <label for="name">Name:</label><br> 
       <input type="text" id="name" name="name" ng-model="input.name" required><br> 

       <label for="email">Email:</label><br> 
       <input type="email" id="email" name="email" ng-model="input.email" required><br> 

       <label for="messsage">Message:</label><br> 
       <textarea id="messsage" name="message" ng-model="input.message" ngMaxlength='2000' required></textarea><br> 

     <button type="submit" name="submit" ng-disabled="error" value="submit">Submit</button> 
    </form> 

Это не работает:

<form method="post" name="form" role="form" ng-controller="contactForm" ng-submit="form.$valid && sendMessage(input)" novalidate class="form-horizontal"> 
     <p ng-show="success"><b>We received your message</b></p> 
     <p ng-show="error">Something wrong happened!, please try again.</p> 

       <label for="name">Name:</label><br> 
       <input type="text" id="name" name="name" ngModel="input.name" required><br> 

       <label for="email">Email:</label><br> 
       <input type="email" id="email" name="email" ngModel="input.email" required><br> 

       <label for="messsage">Message:</label><br> 
       <textarea id="messsage" name="message" ngModel="input.message" ngMaxlength='2000' required></textarea><br> 

     <button type="submit" name="submit" ng-disabled="error" value="submit">Submit</button> 
    </form> 

для 2 входов и текстовое поле, если я использую «нг-модель» электронной почты отправляет, но при загрузке страницы , форма загружается недействительной. Если я использую 'ngModel', форма загружается чистым, но электронная почта не будет отправлена.

контроллер здесь:

app.controller("contactForm", ['$scope', '$http', function($scope, $http) { 
    $scope.success = false; 
    $scope.error = false; 

    $scope.sendMessage = function(input) { 
     $http({ 
      method: 'POST', 
      url: 'processForm.php', 
      data: input, 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }) 
     .success(function(data) { 
     if (data.success) { 
      $scope.success = true; 
     $scope.input.name=""; 
     $scope.input.email=""; 
     $scope.input.message=""; 
     } else { 
      $scope.error = true; 
     } 
     }); 
    } 

Вы можете видеть, что здесь живут: http://smartestdiner.com/Bethel/indexx.html#/contact Предупреждение: Существует несколько раздражает красный фон

.ng-invalid{ 
    background-color:red; 
} 
    }]); 

Вот как мы знаем, что загружается недействительно.

Answer 1

Досадный красный фон - это форма, так как у вас есть общее правило, установленное .ng-invalid, класс также будет установлен на форме. Вам нужно будет сделать его более конкретным для входов и элементов управления в форме.

Пример:

input.ng-invalid, 
textarea.ng-invalid { 
    background-color:red; 
} 

Или просто сбросить правило form.ng-invalid

---

Чтобы добавить на нет ничего называют ngModel это ng-model. используя прежний, он ничего не делает, кроме добавления атрибута фиктивного элемента, он не имеет никакого эффекта. Это угловой способ присвоения директивы, поскольку html нечувствителен к регистру, односторонний угловой может идентифицировать директиву из атрибута или имени элемента (на основе ограничения). Он преобразует его в camelCasing для оценки и обработки соответствующих директив (или привязок атрибутов директив). Если вы не указали ng-model, и если форма или элемент управления не имеет атрибута novalidate, то проверка HTML5 браузера в этом случае является непоследовательностью. С помощью атрибута HTML5 novalidate убедитесь, что на форме не существует встроенной проверки.

Answer 2

• ng-model - это когда вы пишете представление (html часть).
• ngModel используется, когда вы пишете пользовательскую директиву. Он находится в «требуется:».. Пары, так что и может получить доступ, переменных как ngModel $ modelValue

ngModel $ modelValue будет иметь самое последнее содержание, которое было набранным пользователем в режиме реального времени. Таким образом, он может использоваться для проверки и т. Д.

Просмотр кода: -

<!doctype html> 
<html ng-app="plankton"> 
<head> 
    <script src="/bower_components/angular/angular.min.js"></script> 
    <script src="/scripts/emailing/emailing.directive.js"></script> 
</head> 
<body ng-controller="EmailingCtrl"> 
    <div> 
     <label>Enter Email: </label> 
     <emailing id="person_email" ng-model="email_entered"></emailing> 
    </div>  
</body> 
</html> 

Пользовательские директивы: -

(function() { 
    'use strict'; 

angular.module('plankton', []) 
     .directive('emailing', function emailing(){ 
     return { 
      restrict: 'AE', 
      replace: 'true', 
      template: '<input type="text"></input>', 
      controllerAs: 'vm', 
      scope: {}, 
      require: "ngModel", 
      link: function(scope, elem, attrs, ngModel){ 
       console.log(ngModel); 
       scope.$watch(function(){ return ngModel.$modelValue; 
          }, function(modelValue){ 
           console.log(modelValue);//awesome! gets live data entered into the input text box 
          }); 
      }, 
     }; 
     }) 
     .controller('EmailingCtrl', function($scope){ 
      var vm = this; 

     }); 
})(); 

Это было plunked здесь: - here