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个输入和textarea如果我使用'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规则集，所以该类也将在表单上设置。您需要使其对表单中的输入和控件更具体。

示例：

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

或者只是重置form.ng-invalid

的规则

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

Answer 2

ng-model是你写视图的时候（html部分）。
ngModel用于编写自定义指令时。它放在＆＃34;要求：＆＃34; param让你可以访问，变量如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 - 打破形式

2 个答案: