<div layout="row" layout-xs="column" style="margin-left: 10px;" >
<md-card  fxFlex="30%" fxFlex.lt-md="90%" style="width:auto;
float: left;padding-left: 40px;">
<h3 style="text-align:left;">SignUp Form </h3>
<form #userForm="ngForm" novalidate>
    <div class="formgroup" >
        <md-form-field class="example-full-width" style="box-shadow: none;">
            <input mdInput placeholder="First_Name"  
            required  name="name" [(ngModel)]="fname">
          </md-form-field>  

    </div>

        <div class="formgroup" >
        <md-form-field class="example-full-width">
            <input mdInput placeholder="Last_Name" 
             name="lastname" [(ngModel)]="lname">
          </md-form-field>  
        </div>

        <div class="formgroup">
        <md-form-field class="example-full-width">
            <input mdInput placeholder="Email" [formControl]="emailFormControl">
            <md-error *ngIf="emailFormControl.hasError('pattern')">
              Please enter a valid email address
            </md-error>
            <md-error *ngIf="emailFormControl.hasError('required')">
              Email is <strong>required</strong>
            </md-error>
          </md-form-field>
        </div>


         <div class="formgroup">
            <md-form-field class="example-full-width">
                <input type="password"  mdInput placeholder="Password"  
                required  name="phone" [(ngModel)]="password">
              </md-form-field>  
            
             </div>

   
        <div class="formgroup">
        <md-form-field class="example-full-width">
            <input type="number" mdInput placeholder="Phone"  min="10" max="10"
            required  name="phone" [(ngModel)]="phone">
          </md-form-field>  
        
         </div>

    <div class="formgroup" >
        <md-form-field class="example-full-width">
            <input mdInput placeholder="organisation"   minlength="4"
            required  name="organisation" [(ngModel)]="organisation">
          </md-form-field>  
        
    </div>
      
    <div class="formgroup" >
        <md-form-field class="example-full-width">
            <input type="number"  mdInput placeholder="Enter otp" required=""
             name="otp" [(ngModel)]="otp" >
          </md-form-field>  
        
    </div>
    <button type="reset" class="btn btn-primary" style="float: left;margin-left: 3px;">Clear</button>
   
  </form>
    <button type="submit"  class="btn btn-primary" style="float: left;margin-left:2px;">Click for Otp</button>
    <button [disabled]="!userForm.form.valid" class="btn btn-primary" type="submit" style="margin-left: 3px;
    float: left;" (click)="submit()">Submit</button>
  
</md-card>
<md-card fxHide.sm="true" fxHide.xs="true" fxFlex style="float:left;margin-left: 3vw;">
  <img src="../../assets/image/1280.gif" style="width:auto;">
</md-card>
</div>

.subscribe(
(dataret => {
this.data = dataret
if(this.data.status == 200){
this.ngProgress.done();
this.Message="You have succesfully commented!";
}
}) ,(error => {
/* console.log("error msg");console.log(error); */
this.ngProgress.done();
this.Message="There is an error!";
}) 
);
}
comment_via_enter1(event){ /* (comment sevice trigger on enter press) */
if(event.keyCode===13){
this.comment_here();
}
else{
}
}
