JSFiddle - React, Tailwind, and code Playground

by imehesz

HTML

<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<body ng-app>
    <div ng-controller="UserForm" class="form-wrapper">
    
      <form name="myForm">
        <img ng-src="{{form.photo}}" class="photo" ng-show="form.photo">
        <label>Name:</label><br/>
        <input type="text" ng-model="form.name" required/> <br/>
        <label>Photo</label><br/>
        <input type="text" ng-model="form.photo" size="20" /> <br/>
        <br /><br/>
        
    
        <label>Address:</label> <br/>
        <input type="text" ng-model="form.address.line1" size="33" required/> <br/>
        <input type="text" ng-model="form.address.city" size="12" required/>,
        <input type="text" ng-model="form.address.state" size="2"
               ng-pattern="state" required/>
        <input type="text" ng-model="form.address.zip" size="5"
               ng-pattern="zip" required/><br/><br/>
    
      <button ng-click="cancel()" ng-disabled="isCancelDisabled()">Cancel</button>
      <button ng-click="save()" ng-disabled="isSaveDisabled()">Save</button>
    </form>
    
    <hr/>
    Debug View:
    <pre>form={{form}}</pre>
    </div>
</body>

CSS

.form-wrapper{
    border: 1px solid grey;
    width: 80%;
    overflow: auto;
    padding: 5px;
}

.photo{
    border: 1px solid yellow;
    width: 150px;
    float: right;
}

JavaScript

function UserForm($scope) {
  var master = {
    name: 'John Smith',
    photo: 'http://2.gravatar.com/avatar/e5e76ca7a860f217ae61e46289865934?size=420',
    address:{
      line1: '123 Main St.',
      city:'Anytown',
      state:'AA',
      zip:'12345'
    }
  };
 
  $scope.state = /^\w\w$/;
  $scope.zip = /^\d\d\d\d\d$/;
 
  $scope.cancel = function() {
    $scope.form = angular.copy(master);
  };
 
  $scope.save = function() {
    master = $scope.form;
    $scope.cancel();
  };
 
  $scope.isCancelDisabled = function() {
    return angular.equals(master, $scope.form);
  };
 
  $scope.isSaveDisabled = function() {
    return $scope.myForm.$invalid || angular.equals(master, $scope.form);
  };
 
  $scope.cancel();
}