How to disable button in angular 7

Question

I have an Angular7 app & using Reactive Forms Module for validation & forms.

this is how my template looks like.

<div class="row" [formGroup]="jobForm">
<div class="form-group"
 [ngClass]="{'has-error': jobForm.get('jobTitle').errors && 
  (jobForm.get('jobTitle').touched || jobForm.get('jobTitle').dirty)  }">
  <input type="text" class="form-control" formControlName="jobTitle" />
  <span class="help-block" *ngIf="formError">
  {{ formError.jobTitle }}
</span>
</div>
 <br />
 <button type="button" class="btn btn-primary" disabled="jobTitle.errors.required"
(click)="submit(jobTitle,jobDesc)">Create</button>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';

@Component({
selector: 'app-create-job',
templateUrl: './create-job.component.html',
styleUrls: ['./create-job.component.css']
})
export class CreateJobComponent implements OnInit {
 constructor(private fb: FormBuilder) {}
 jobForm: FormGroup;
 formError: any;
 validationMessages = {
  jobTitle: { required: 'Job Title required'},
  jobCode: { required: 'Job Coderequired'},
  };

 ngOnInit() {
  this.jobForm = this.fb.group({
  jobTitle: ['', Validators.required]
});
this.formError = {
  jobTitle: '', jobCode : ''
};
this.jobForm.valueChanges.subscribe(data => {
  this.logValidationError(this.jobForm);
});

}

There are such 2-3 input elements which has validation.

How can I disable the submit if any of the validation has error. I don't want to go one by one property as I did for one property.

I mean if formError has any error, keep the button disable & initially disable.

Thanks!

Possible duplicate of [Angular2 Forms - Submit Button Disabled?](https://stackoverflow.com/questions/32062051/angular2-forms-submit-button-disabled) — wentjun, Apr 23 '19 at 06:41

score 22 · Answer 1 · answered Apr 23 '19 at 06:32

22

You need to check whether the form is valid.

<button type="submit" [disabled]="!jobForm.valid">Submit</button>

Angular Reactive Forms

answered Apr 23 '19 at 06:32

monstertjie_za

7,277
8
42
73

score 8 · Answer 2 · answered Apr 23 '19 at 07:00

You need to use ternary operator as disabled accepts true and null to work properly

So you can try

<button 
   type="button" 
   class="btn btn-primary" 
   [disabled]="jobTitle.errors.required? true: null"
   (click)="submit(jobTitle,jobDesc)">
      Create
</button>

score 4 · Answer 3 · edited Apr 23 '19 at 09:46

4

Try this code:

<button type="button" class="btn btn-primary" [disabled]="jobForm.form.invalid"
(click)="submit(jobTitle,jobDesc)">Create</button>

edited Apr 23 '19 at 09:46

barbsan

3,418
11
21
28

answered Apr 23 '19 at 06:40

Jogi

81
4

Boris Adamyan · Answer 4 · 2019-04-23T11:46:02.280

2

You must to check is the form is valid or not.

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
  <input required name="uri" [(ngModel)]="data">
  <button [disabled]="!f.valid">Submut</button>
</form>

edited Apr 23 '19 at 11:46

answered Apr 23 '19 at 06:34

Boris Adamyan

350
2
14

Avoid posting code-only answers, [edit] your answer and add some explanation how your code solves the issue – barbsan Apr 23 '19 at 09:42

score 0 · Answer 5 · answered Apr 23 '19 at 06:35

Just make the button rely on the validity of the form.

This will take care of errors as well as pristine (initial) condition.

Example:

<button type="button" class="btn btn-primary" [disabled]="!jobForm.valid"
(click)="submit(jobTitle,jobDesc)">Create</button>

How to disable button in angular 7

5 Answers5

So you can try