How to make submit button disabled

Question

How to disable the  Submit  button until the form is valid    Does angular2 have an equivalent to ng-disabled that can be used on the Submit button   ng-disabled doesn t work for me

User · Answer

May be below code can help    lt button type  submit   attr disabled    ngForm valid   true   null  gt Submit lt  button gt

User · Answer

This worked for me    ts  newForm   FormGroup     html   lt input type  button   disabled   newForm invalid    gt

User · Answer

As seen in this Angular example  there is a way to disable a button until the whole form is valid    lt button type  submit   disabled    ngForm valid  gt Submit lt  button gt

User · Answer

It is important that you include the  required  keyword inside each one of your mandatory input tags for it to work        lt form  ngSubmit   login loginForm value    loginForm  ngForm  gt               lt input ngModel required name  username  id  userName  type  text  class  form-control  placeholder  User Name       gt       lt button type  submit   disabled   loginForm invalid  class  btn btn-primary  gt Login lt  button gt

User · Answer

html   lt form  formGroup   contactForm  gt    lt button  disabled   contactForm invalid    click   onSubmit    gt SEND lt  button gt     ts  contactForm  FormGroup

User · Answer

in Angular 2 x x   4  5       lt form  loginForm  ngForm  gt       lt input type  text  required gt        lt button  type  submit    disabled   loginForm form invalid  gt Submit lt  button gt   lt  form gt

User · Answer

Here is a working example  you ll have to trust me that there s a submit   method on the controller - it prints an Object  like  user   abc   if  abc  is entered in the input field     lt form  loginForm  ngForm   ngSubmit   submit loginForm value   gt       lt input type  text  name  user  ngModel required gt       lt button  type  submit    disabled   loginForm invalid  gt          Submit      lt  button gt   lt  form gt    As you can see    don t use loginForm form  just use loginForm loginForm invalid works as well as  loginForm valid if you want submit   to be passed the correct value s   the input element should have name and ngModel attributes   Also  this is when you re NOT using the new FormBuilder  which I recommend  Things are very different when using FormBuilder

User · Answer

Form validation is very much straight forward in Angular 2  Here is an example    lt form  ngSubmit   onSubmit     myForm  ngForm  gt     lt div class  form-group  gt     lt label for  firstname  gt First Name lt  label gt     lt input type  text  class  form-control  id  firstname      required   ngModel    firstname  name  firstname  gt    lt  div gt     lt div class  form-group  gt     lt label for  middlename  gt Middle Name lt  label gt     lt input type  text   class  form-control  id  middlename        ngModel    middlename  name  middlename  gt    lt  div gt     lt div class  form-group  gt     lt label for  lastname  gt Last Name lt  label gt     lt input type  text   class  form-control  id  lastname      required minlength    2  maxlength  6    ngModel      lastname  name  lastname  gt    lt  div gt     lt div class  form-group  gt     lt label for  mobnumber  gt Mob Number lt  label gt     lt input type  text   class  form-control  id  mobnumber       minlength    2  maxlength  10  pattern    0-9   -  s           ngModel      mobnumber  name  mobnumber  gt    lt  div gt     lt button type  submit   disabled    myForm form valid  gt Submit lt  button gt    lt  form gt    Check this plunker for demo  More info

[forms] How to make 'submit' button disabled?

Examples related to forms

Examples related to angular