Angular2 disable button

Question

I know that in angular2 I can disable a button with the   disable  attribute  for example     lt button  disabled    isValid   click   onConfirm    gt Confirm lt  button gt    but can I do it using  ngClass  or  ngStyle    Like so    lt button  ngStyle    disabled    isValid    click   onConfirm    gt Confirm lt  button gt    Thanks

User · Answer

Using ngClass to disabled the button for invalid form is not good practice in Angular2 when its providing inbuilt features to enable and disable the button if form is valid and invalid respectively without doing any extra efforts logic    disabled  will do all thing like if form is valid then it will be enabled and if form is invalid then it will be disabled automatically   See Example    lt form  ngSubmit   f form valid   f  ngForm  novalidate gt   lt input type  text  placeholder  Name    ngModel    txtName  name  txtname   textname  ngModel  required gt   lt input type  button  class  mdl-button   disabled    f form valid   click   onSave    name    gt

User · Answer

May be below code can help    lt button  attr disabled    isValid   true   null  gt Submit lt  button gt

User · Answer

I think this is the easiest way    lt  -- Submit Button-- gt   lt button    mat-raised-button          color  primary     disabled    f valid   gt    Submit  lt  button gt

User · Answer

I tried using disabled along with click event  Below is the snippet   the accepted answer also worked perfectly fine   I am adding this answer to give an example how it can be used with disabled and click properties    lt button  click    planNextDisabled  amp  amp  planNext     disabled   planNextDisabled  gt  lt  button gt

User · Answer

If you have a form then the following is also possible    lt form  f  ngForm  gt       lt input name  myfield  type  text  minlenght  3  required ngModel gt       lt button type  submit   disabled    f valid  gt Submit lt  button gt   lt  form gt    Demo here  http   plnkr co edit Xm2dCwqB9p6WygrquUGh p preview amp open app 2Fapp component ts

User · Answer

lt button  disabled   this model IsConnected      false                 ngClass   setStyles                  class  action-button action-button-selected button-send                 click    this Send    gt            SEND          lt  button gt     ts code  setStyles          let styles           action-button-disabled   this model IsConnected      false          return styles

User · Answer

If you are using reactive forms and want to disable some input associated with a form control  you should place this disabled logic into you code and call yourFormControl disable   or yourFormControl enable

User · Answer

I would recommend the following    lt button  disabled   isInvalid    gt Submit lt  button gt

User · Answer

Update  I m wondering  Why don t you want to use the  disabled  attribute binding provided by Angular 2  It s the correct way to dealt with this situation  I propose you move your isValid check via component method    lt button  disabled     isValid   click   onConfirm    gt Confirm lt  button gt    The Problem with what you tried explained below  Basically you could use ngClass here  But adding class wouldn t restrict event from firing  For firing up event on valid input  you should change click event code to below  So that onConfirm will get fired only when field is valid    lt button  ngClass    disabled    isValid    click   isValid  amp  amp  onConfirm    gt Confirm lt  button gt    Demo Here

User · Answer

Yes you can   lt div class  button   ngClass    active  isOn  disabled  isDisabled             click   toggle  isOn   gt           Click me    lt  div gt    https   angular io docs ts latest api common NgClass-directive html

[html] Angular2 disable button

Examples related to html

Examples related to angular

Examples related to angular2-template

Examples related to angular2-forms