<!DOCTYPE html>
<html ng-app="app" >

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    
    <div ng-controller="TestCtrl">
      <form name="fm" novalidate >
        
        <ng-form name="cdNmFm" >
          <input 
            name="inputCd"
            type="text" ng-model="data.cd"
            ng-class="{'has-error':fm.inputCd.$invalid}"
            required/>
          
          <input 
            name="inputNm"
            type="text" ng-model="data.nm"
            ng-class="{'has-error':fm.inputNm.$invalid}"
            required/>
            
          <button ng-disabled="cdNmFm.$invalid">ふたつ送るよ〜</button>
        </ng-form>
        <br />
          
        <input 
          name="inputHoge"
          type="text" ng-model="data.hoge"
          ng-class="{'has-error':fm.inputHoge.$invalid}"
          required/>
          
        <button ng-disabled="fm.$invalid">全部おくるよ〜</button>
      </form>
    </div>
    
  </body>

</html>
(function(){

"use strict";

// create controllers
angular.module("controllers",[]);

angular.module("controllers").
  controller("TestCtrl", function( $scope ){
      
      $scope.data = {
        cd:1234,
        nm:"",
        hoge:""
      };
      
  });

// application boot!
angular.module("app",["controllers"]);

  
})();

html,body {
  background-color:white;
}
body{
  padding: 8px;
}

input[type="text"]{
  font-size: 1.4rem;
  border-radius:4px;
}

ul {
  padding: 4px;
}
li {
  padding:4px;
  list-style: none;
  margin:4px;
  border-bottom: 1px solid rgba( 100, 100, 100, 0.4);
}
.has-error{
  background-color:lightyellow;
  border-color: red;
}