angularjs-form-markup-4.html

<div class="container" ng-app="demoApp">
  <form name="messageForm" novalidate>

    <!-- NAME -->
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" ng-model="formData.name" required>
    <div ng-messages="messageForm.name.$error" ng-show="messageForm.name.$touched">
      <div ng-message="required">This field is required</div>
    </div>

    <!-- EMAIL -->
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Email address" ng-model="formData.email" required>
    <div ng-messages="messageForm.email.$error" ng-show="messageForm.email.$touched">
      <div ng-message="required">This needs to be a valid email</div>
    </div>

    <!-- MESSAGE CONTENT -->
    <label for="message">Message</label>
    <textarea name="message" rows="6" id="message" placeholder="Message..." ng-model="formData.message" ng-maxlength="400" required></textarea>
    <div ng-messages="messageForm.message.$error" ng-show="messageForm.email.$touched">
      <div ng-message="maxlength">This field is too long</div>
    </div>

    <!-- FORM ACTIONS -->
    <button type="submit" ng-disabled="messageForm.$invalid" ng-click="submitAppForm()">SEND</button>
  </form>
</div>