ng-model vs ngModel - 打破形式答案

【问题标题】：ng-model vs ngModel - breaks formng-model vs ngModel - 打破形式
【发布时间】：2015-03-03 16:17:06
【问题描述】：

新的角度，新的生活：

我有一个小的电子邮件表单。

这行得通：

    <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>

如果我使用电子邮件发送的“ng-model”，则对于 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;
}
  }]);

这就是我们知道它加载无效的方式。

【问题讨论】：

标签： html css angularjs forms angular-ngmodel

【解决方案1】：

烦人的红色背景是表单，因为你有一个由.ng-invalid 设置的非常通用的规则，所以也会在表单上设置类。您需要使其更具体地用于表单中的输入和控件。

例子：

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

或者只是重置form.ng-invalid的规则

补充一点，没有什么叫做ngModel，它是ng-model。使用前一个不会做任何事情，只是在元素上添加一个虚拟属性，它没有任何效果。这是指令命名的角度方式，因为 html 不区分大小写，这是 angular 可以从属性或元素名称（基于限制）识别指令的一种方式。它将其转换为 camelCasing 以评估和处理相应的指令（或指令属性绑定）。当您没有指定ng-model 并且表单或控件没有novalidate 属性时，浏览器的HTML5 验证就会启动，这就是您所看到的不一致。使用HTML5 novalidate 属性可确保表单上不会发生本机验证。

【讨论】：

已实施，感谢您对 ng-modelvs ngModel 问题的猜测？
我没有看到问题的那一部分.. :)
我没明白你说的for the 2 inputs and the textarea if I use 'ng-model' the email sends, but when the page loads, the form loads invalid. If i use 'ngModel' the form loads clean, but the email wont submit.是什么意思？
如果你想看什么摆弄，我随时待命。
哦，我明白了，没有什么叫ngModel，这意味着没有ng-model

【解决方案2】：

ng-model 是你编写视图（html 部分）的时候。
ngModel 在编写自定义指令时使用。它被放置在“require：”参数中，以便您可以访问， 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;

       });
})();

此处已插入：- here

【讨论】：