ng-model vs ngModel - 打破形式

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 个输入和文本区域，如果我使用 'ng-model' 电子邮件发送，但是当页面加载时，表单加载无效。如果我使用 '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 设置的非常通用的规则，class 也会在表单上设置。您需要针对表单中的输入和控件使其更加具体。

示例：

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

或者只是为 form.ng-invalid

重置规则

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

Answer 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

ng-model vs ngModel - 打破形式

ng-model vs ngModel - breaks form

html

css

forms

angularjs

angular-ngmodel