How to make 'submit' button disabled?
FormsAngularForms Problem Overview
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.)
Forms Solutions
Solution 1 - Forms
As seen in this Angular example, there is a way to disable a button until the whole form is valid:
<button type="submit" [disabled]="!ngForm.valid">Submit</button>
Solution 2 - Forms
in Angular 2.x.x , 4, 5 ...
<form #loginForm="ngForm">
<input type="text" required>
<button type="submit" [disabled]="loginForm.form.invalid">Submit</button>
</form>
Solution 3 - Forms
.html
<form [formGroup]="contactForm">
<button [disabled]="contactForm.invalid" (click)="onSubmit()">SEND</button>
.ts
contactForm: FormGroup;
Solution 4 - Forms
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):
<form #loginForm="ngForm" (ngSubmit)="submit(loginForm.value)">
<input type="text" name="user" ngModel required>
<button type="submit" [disabled]="loginForm.invalid">
Submit
</button>
</form>
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.
Solution 5 - Forms
Form validation is very much straight forward in Angular 2
Here is an example,
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" id="firstname"
required [(ngModel)]="firstname" name="firstname">
</div>
<div class="form-group">
<label for="middlename">Middle Name</label>
<input type="text" class="form-control" id="middlename"
[(ngModel)]="middlename" name="middlename">
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname"
required minlength = '2' maxlength="6" [(ngModel)] = "lastname" name="lastname">
</div>
<div class="form-group">
<label for="mobnumber">Mob Number</label>
<input type="text" class="form-control" id="mobnumber"
minlength = '2' maxlength="10" pattern="^[0-9()\-+\s]+$"
[(ngModel)] = "mobnumber" name="mobnumber">
</div>
<button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>
Solution 6 - Forms
This worked for me.
.ts
newForm : FormGroup;
.html
<input type="button" [disabled]="newForm.invalid" />
Solution 7 - Forms
It is important that you include the "required" keyword inside each one of your mandatory input tags for it to work.
<form (ngSubmit)="login(loginForm.value)" #loginForm="ngForm">
...
<input ngModel required name="username" id="userName" type="text" class="form-control" placeholder="User Name..." />
<button type="submit" [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>
Solution 8 - Forms
May be below code can help:
<button type="submit" [attr.disabled]="!ngForm.valid ? true : null">Submit</button>