Angular Material: Leave form using angular material

Code

To Get the above design copy the below code

<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language="javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .module('inputErrorsApp', ['ngMaterial', 'ngMessages'])
            .controller('cardController', cardController);

function cardController ($scope) {            
         }  
      </script>

.cyan{
  background: #055656;
    box-shadow: 1px 2px 3px #ccc;
}

.inputdemoErrors .inputErrorsApp {
  min-height: 48px; }

.inputdemoErrors md-input-container > p {
  font-size: 0.8em;
  text-align: left;
  width: 100%; }

md-input-container:after(.md-input-valid) .md-auto-hide .md-input-message-animation{
opacity: 0!important;

}
            md-input-container {
             margin: 0px!important;
             vertical-align: middle;
            }
            .center_align{
               text-align: center;
               margin: 0 auto;
            }
md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder {
    text-shadow: ;
    color: #4CAF50!important;
}
md-input-container:after {
    content: '';
    display: table;
    clear: both;
    opacity: 0!important;
}
.clearflex{
      display: block;
    padding: 16px;
}
.pull-left{
  float: left;
    
    margin: 19px;
    
}
.pull-right{
  float: right;
}
md-card {
    box-shadow: 0 5px 9px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
md-input-container.md-default-theme .md-input, md-input-container .md-input {
   
}
.md-select-value, md-select .md-select-value {
    border-bottom-color: #8BC34A!important;
}
.md-select-value {
  color: #4CAF50!important;
}
.grey placeholder{
  color: #ccc!important;
}

</style>    
   </head>
   <form name="projectForm">
   <body ng-app="firstApplication">  
      <md-card>
      <div layout="row" class="cyan">
       <div class="pull-left md-title">Leave Form</div>
        
            <div layout-gt-xs="pull-right row">
          
            <md-select ng-model="actions" placeholder="More actions">
              <md-option value="Select by Date">Select by Date</md-option>
              <md-option value="Select by Designation">Select by Designation</md-option>
              <md-option value="Select by Leave type">Select by Leave type</md-option>

</md-select>
        
          </div>
          </div>
          
          
          
        </md-card-header>
       <md-card-content>

<div class="row clearflex"></div>
        <md-input-container class="md-block" md-input-invalid">
          <label class="md-required" for="input_235">Employee Email</label>
          <input required="" name="clientName" ng-model="project.firstName" class="ng-pristine md-input ng-empty ng-invalid ng-invalid-required ng-touched">
          <div class="md-errors-spacer"></div>
          <div ng-messages="projectForm.firstName.$error" class="md-input-messages-animation md-auto-hide ng-active" aria-live="assertive">
            <div ng-message="required" class="md-input-message-animation ng-scope"></div>
          </div>
        </md-input-container>
     
        
        <md-input-container class="md-block">
          <label>Employee ID</label>
          <input type="text" required="">
        </md-input-container>

<md-input-container class="md-block">
          <label>Employee Name</label>
          <input>
        </md-input-container>

<md-input-container class="md-block">
          <label>Designation</label>
          <input>
        </md-input-container>

<md-input-container class="md-block">
          <label>Leave Type</label>
          <md-select ng-model="Leave">
          <md-option value="Casual Leave">Casual Leave</md-option>
          <md-option value="Paid Leave">Paid Leave</md-option>
          </md-select>
        </md-input-container>

<div class="row clearflex"></div> 
        
        <md-datepicker class="flex-50" ng-model="myDate1" md-placeholder="Leave From Date"></md-datepicker>
        
        <md-datepicker class="flex-50" ng-model="myDate11" md-placeholder="Leave To Date"></md-datepicker>
       <div class="row clearflex"></div>
       <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center" >
    <md-button flex="50" class="md-primary md-raised">Submit</md-button>
    <md-button flex="50" class="md-primary md-raised">Reset</md-button>
  </div>
         </md-card-content>
      </md-card>

</body>
   
</html>

10 comments:

Unknown13 September 2018 at 23:28
I read this post two times, I like it so much, please try to keep posting & Let me introduce other material that may be good for our community.
Data Science training in marathahalli
Data Science training in btm
Data Science training in rajaji nagar
Data Science training in chennai
Data Science training in electronic city
Data Science training in USA
Data science training in pune
Data science training in kalyan nagar

Unknown16 September 2018 at 23:18
This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
java training in chennai | java training in bangalore

java training in tambaram | java training in velachery
gowsalya20 September 2018 at 22:07
Thank you for benefiting from time to focus on this kind of, I feel firmly about it and also really like comprehending far more with this particular subject matter. In case doable, when you get know-how, is it possible to thoughts modernizing your site together with far more details? It’s extremely useful to me.
python training in velachery
python training institute in chennai

ragul ragul21 September 2018 at 22:25
Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.
Unknown3 October 2018 at 02:40
This looks absolutely perfect. All these tiny details are made with lot of background knowledge. I like it a lot.
Blueprism training in btm

Blueprism online training
Unknown6 October 2018 at 01:49
From your discussion I have understood that which will be better for me and which is easy to use. Really, I have liked your brilliant discussion. I will comThis is great helping material for every one visitor. You have done a great responsible person. i want to say thanks owner of this blog.

angularjs Training in bangalore

angularjs Training in btm

angularjs Training in electronic-city

angularjs online Training

angularjs Training in marathahalli
Mounika12 October 2018 at 21:53

Hmm, it seems like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well as an aspiring blog writer, but I’m still new to the whole thing. Do you have any recommendations for newbie blog writers? I’d appreciate it.

AWS Interview Questions And Answers

AWS Training in Bangalore | Amazon Web Services Training in Bangalore

AWS Training in Pune | Best Amazon Web Services Training in Pune

Amazon Web Services Training in Pune | Best AWS Training in Pune

AWS Online Training | Online AWS Certification Course - Gangboard
Ajish18 July 2019 at 06:12
Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.
blue prism Training in Electronic City
divya6 June 2020 at 19:37
I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.keep update.
Ai & Artificial Intelligence Course in Chennai
PHP Training in Chennai
Ethical Hacking Course in Chennai Blue Prism Training in Chennai
UiPath Training in Chennai
Revathi16 July 2020 at 06:04
Nice blog,I understood the topic very clearly,And want to study more like this.Thanks!!

android training in chennai

android online training in chennai

android training in bangalore

android training in hyderabad

android Training in coimbatore

android training

android online training

Wednesday 30 November 2016

Leave form using angular material

Code

10 comments: