We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Submit button confusion between <input> and <button> tag

Thread ID:

Created:

Updated:

Platform:

Replies:

132641 Sep 13,2017 10:38 AM Oct 4,2017 01:39 AM Angular 7
loading
Tags: ejToggleButton
Milos
Asked On September 13, 2017 10:38 AM

Hi

There is no control "ejButton" in the dropdown 'Control' than I selected ejToogleButton but this question points to 'ejButton'.

According to one of my previous question:
https://www.syncfusion.com/forums/132037/simple-submit-button-with-icon
if I want to use button with icon I need to use
But this tag does not work in case if I want to use "textonly" button (value property does not work).
In that case I need to use tag:
Why is that ?
I want to use synfusion button in Angular2/4 form and I need button as a button, where button can be disabled if form is not valid.
I cannot do that with tag due to additional elements which syncfusion creates for button presentation.
Is it possible to I create button "textonly" with
Regards,
Milos

Milos
Replied On September 13, 2017 10:43 AM

Explanations tag in this question are rendered as a HTML elements.
I do not know hot to fix this in question.


Regards,

Milos


Rajesh Kumar Anburajan [Syncfusion]
Replied On September 14, 2017 08:20 AM

  
Hi Milos,    
    
Thanks for contacting Syncfusion Support.    
    
We have checked with your query. And we would like let you know that you can use any button or input tag to create the EJ Button with contentType  as "textonly".  Please use text property in button tag to display the text in a button.    
   
If you are using “contentType=textonly” then you can use “text” property.    
   
<button type="button" contentType="textonly" text="login" ej-button></button>   
   
If you are using “contentType=imageonly” then you can use “prefixIcon” property.    
   
<button type="button" contentType="imageonly" prefixIcon="e-icon e-handup" ej-button></button>   
   
If you are using “contentType=textandimage” then you can use “prefixIcon” and “text” property.    
   
<button type="button" contentType="textandimage" prefixIcon="e-icon e-handup" text="login" ej-button></button> >   
   
   
Please refer the below code in your sample to achieve your requirement.    
    
app.component.html:    
    
    
<button type="button" contentType="textonly" text="login" ej-button></button>//Here you can use content type textonly   
   
<button type="button" contentType="imageonly" prefixIcon="e-icon e-handup" ej-button></button>>//Here you can use content type imageonly   
   
       
<button type="button" contentType="textandimage" prefixIcon="e-icon e-handup" text="login" ej-button></button> >>//Here you can use content type textandimage   
 
    
app.component.ts:    
    
    
import { Component, ViewEncapsulation} from '@angular/core';    
    
    @Component({    
    selector: 'ej-app',    
    templateUrl: './app.component.html',    
    })    
    export class AppComponent {    
        constructor() {     
        }    
     }    
 
    
In the above code example, we have used <button></button> tag to create the button with contentType and text.   
    
If issue persists, please revert with more details that will help us to provide the solution.    
    
Regards,    
Rajesh Kumar A  
 


Milos
Replied On September 15, 2017 05:04 AM

Hi Rajesh,

     Thank you it was all I need, now it is clear.

Regards,

Milos


Milos
Replied On September 15, 2017 10:04 AM

Sorry I found another problem with this implementation.

My button is disabled and click works.

It should not work if button is disabled.


Regards,

Milos


Berly Christopher [Syncfusion]
Replied On September 18, 2017 09:14 AM

Hi Milos,  
   
Sorry for the inconvenience caused.   
  
We were unable to reproduce the reported issue (“My button is disabled and click works.”) at our end. Please refer the below code example.  
app.component.html: 
<button type="button" text="login" ej-button id="button1" [enabled]="enabled" (ejclick)="onClick($event)"></button> 
 
<ej-togglebutton type="checkbox" id="togglebutton1" contenttype="imageonly" [enabled]="enabled" (ejclick)="onClick($event)" defaultprefixicon="e-icon e-mediaplay" activeprefixicon="e-icon e-mediapause"></ej-togglebutton> 
  
app.component.ts: 
 
 
  export class DatePickerComponent { 
        enabled:boolean; 
          constructor() { 
              this.enabled=false; 
          } 
          onClick(){ 
              alert("click action get triggered"); 
          } 
      } 
  
               
In the above code example, we have disabled the button and toggle button to provide the click action for those items. According to the above code example, while button is in the enabled state at that time click, action get occur. Please get the sample from the following location.   
 
If issue persists, please revert us with issue reproducing sample that will help us to provide the solution. 
  
Regards, 
Berly B.C 


Milos
Replied On October 3, 2017 02:49 AM

Hi Berly,

          Thank you, that is it.

           My mistake was that I used Angular 2 (click) event instead of Syncfusion button click (ejclick).

Regards,

Milos


Berly Christopher [Syncfusion]
Replied On October 4, 2017 01:39 AM

Hi Milos, 
Thanks for the update. We are happy to hear that the issue is resolved at your end. Please get back to us if you need any further assistance on this. 
Regards, 
Berly B.C 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;