<!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-rc.0/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    
    <div ng-controller="TestCtrl">
      <form name="fm" novalidate >
      
        <ng-form name="itemFm" >
          <input 
            name="inputCd"
            type="text" ng-model="data.cd"
            ng-class="{'has-error':itemFm.inputCd.$invalid}"
            required/>
            
          <input 
            name="inputNm"
            type="text" ng-model="data.nm"
            ng-class="{'has-error':itemFm.inputNm.$invalid}"
            ng-model-options="{ updateOn: 'blur' }" 
            required/>
              
          <button ng-disabled="itemFm.$invalid">{{$index}}γΌγŸγ‚“</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">send</button>
      </form>
      {{data}}
    </div>
    
  </body>

</html>

(function(){

"use strict";

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

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

  });

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