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

[Milos]

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 tag:

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 tag ?

Regards,

Milos

[Milos]

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]

  

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]

Hi Rajesh,

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

Regards,

Milos

[Milos]

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]

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.   

Sample link: http://www.syncfusion.com/downloads/support/forum/132641/ze/AngularDatepicker_(5)912974221 

 

If issue persists, please revert us with issue reproducing sample that will help us to provide the solution. 

  

Regards, 

Berly B.C 

[Milos]

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]

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