ng-model vs ngModel - breaks form

Question

New to angular, new to life:

I have a small email form.

This works:

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

This does not work:

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

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.

controller here:

  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;
        }
      } );
    }

You can see it live here: http://smartestdiner.com/Bethel/indexx.html#/contact Warning: There is some annoying red background

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

That's how we know it is loading invalidly.

Answer 1

The annoying red background is the form, since you have a very generic rule set by .ng-invalid, the class will be set on the form as well. You would need to make it more specific for the inputs and controls within the form.

Example:

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

Or just reset rule for form.ng-invalid

---

To add on there is nothing called ngModel it is ng-model. using the former one doesn't do anything but adds a dummy attribute on the element, it has no effect. It is angular way of directive naming, since html is case insensitive the one way angular can identify the directive from attribute or element name (based on the restriction). It converts it to camelCasing to evaluate and process respective directive (or directives attribute bindings). When you do not have ng-model specified and if the form or control does not have novalidate attribute, then the browser's HTML5 validation kicks in that is what you see as inconsistency. Using HTML5 novalidate attribute makes sure no native validation happens on the form.