Angular => Reactive Forms : disable button when it encounters an empty input field

Question

What is the Reactive Forms way to disable the button, when for instance, in a form, an empty input field is met?

So in others words, when all the fields have to be fulfilled in order to enable the button?

I do know that for the TemplateDriven way, it is something like that :

<div class="row mt-5">
  <div class="col-md-6 mx-auto">
    <h2 class="text-center">Add Article</h2>
    <div class="card mt-3">
      <div class="card-body">
        <form [formGroup]="articleForm" (ngSubmit)="addArticle()">
          <div class="form-group">
            <label>Title</label>
            <input type="text" formControlName="title" [(ngModel)]="title" class="form-control"
                   [ngClass]="{ 'is-invalid': submitted && articleForm.controls.title.errors }"/>
            <div *ngIf="submitted && articleForm.controls.title.errors" class="text-danger">
              <div *ngIf="articleForm.controls.title.errors.required">Title is required</div>
              <div *ngIf="articleForm.controls.title.errors.minlength">At least 3 characters</div>
              <div *ngIf="articleForm.controls.title.errors.maxlength">Cannot exceed 10 characters</div>
            </div>
          </div>
          <div class="form-group">
            <label>Description</label>
            <input type="text" formControlName="description" [(ngModel)]="description" class="form-control"
                   [ngClass]="{ 'is-invalid': submitted && articleForm.controls.description.errors }"/>
            <div *ngIf="submitted && articleForm.controls.description.errors" class="text-danger">
              <div *ngIf="articleForm.controls.description.errors.required">Description is required</div>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary col-md-4" [disabled]="!title || !description">Add</button>
            <a [routerLink]="['/']">
              <button type="submit" class="btn btn-primary col-md-4 ml-1">Back</button>
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

We need to provide an [(ngModel)] to the inputs fields :

[(ngModel)]="title"
[(ngModel)]="description"

and then on the button we can check for the event that way :

[disabled]="!title || !description"

And it does work.

However I am mixing formControlName and ngModel, which is not recommended. So I was wondering, how to make it work in a Reactive Form way?

Please take care of yourself.

ionut-t ionut-t · Accepted Answer · 2020-05-04T18:23:44

You can remove the ngModel.

To have your button disabled if the form is invalid you should do it like so:

<button type="submit"[disabled]="articleForm.invalid">Add</button>

I assume you have the code in place in the ts file with the validators in place.

Angular => Reactive Forms : disable button when it encounters an empty input field

1 Answers