angular button disable when form control empty

Question

I need to disable search button, when text-box empty. I tried to add disable attribute to search button. but its not working.

This is my html code:

<div class="col-md-5 pl-0">
  <div class="input-group mb-3">
    <input
      type="text"
      placeholder="Enter MTCN Number"
      maxlength="16"
      class="form-control mtcn-textbox"
      [formControl]="mtcn"
      required
      type="text"
      aria-describedby="basic-addon2"
    />
    <div class="input-group-append">
      <button
        class="btn btn-primary"
        type="button"
        (click)="retrieveData()"
        [disabled]="mtcn"
      >
        Search
      </button>
    </div>
  </div>
</div>

Can someone help me to achieve this?

it should be something like [disabled]="!mtcn.value"

Tim Lepage
– Tim Lepage

2020-08-31 07:09:17 +00:00
Commented Aug 31, 2020 at 7:09 — Tim Lepage
– Tim Lepage, Commented Aug 31, 2020 at 7:09

Amit Joshi · Accepted Answer · 2020-08-31 07:24:02Z

0

You can try [disabled]="!mtcn.value" or put your code into Form tag and giv it an id and use "form.valid"

answered Aug 31, 2020 at 7:24

Amit Joshi

359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MoxxiManagarm · Accepted Answer · 2020-08-31 07:24:29Z

Please note that mtcn is a FormControl, which is always truthy. You want to check the value of the FormControl.

You have 2 possibilities.

1. disabled attribute

<div class="input-group mb-3">
  <input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" (click)="retrieveData()" [disabled]="!mtcn.value">Search</button>
  </div>
</div>

2. disabled class (since it seems you are using bootstrap)

<div class="input-group mb-3">
  <input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" (click)="retrieveData()" [ngClass]="{ disabled: !mtcn.value }">Search</button>
  </div>
</div>

Vlad Pavlik · Accepted Answer · 2020-08-31 08:21:02Z

0

You can disable your button just using [disabled]="!mtcn.value". Or you can disable button if your form is not valid: [disabled]="!myForm.valid"

edited Aug 31, 2020 at 8:21

user13258211

answered Aug 31, 2020 at 7:12

Vlad Pavlik

11 bronze badge

Comments

mbojko · Accepted Answer · 2020-08-31 08:25:56Z

0

The [disabled]="!mtcn.value" would work, but I'd like to strongly advise against it. Assume you want to add some other validation rules (length, pattern, whatever) - you'd need to repeat the same thing twice, in the form control itself and in the button. In the long run, it'll get tedious to maintain and invite bugs.

Just go

<button [disabled]="mtcn.invalid">

Edit: Oh, and if you're using [formControl], put the validation rules in the mtcn definition in the TypeScript, not in the template, right now you're mixing model driven and template driven forms.

edited Aug 31, 2020 at 8:25

answered Aug 31, 2020 at 8:20

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

angular button disable when form control empty

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related