How to disable or readonly select input angular

Question

If the cardSelect variable is true, just let [readonly]="cardSelect"

<select name="card-exp-month" #validateMonth formControlName="digiMes" class="form- 
 control" name="validade" id="validade"   >
<option value="">Mês</option>
<option value="01">01 Jan</option>
<option value="02">02 Fev</option>
<option value="03">03 Mar</option>
<option value="04">04 Abr</option>
<option value="05">05 Mai</option>
<option value="06">06 Jun</option>
<option value="07">07 Jul</option>
<option value="08">08 Ago</option>
<option value="09">09 Set</option>
<option value="10">10 Out</option>
<option value="11">11 Nov</option>
<option value="12">12 Dez</option>
</select>

When is input text its works

<label for="nomeimpresso">Nome <b>impresso</b> no cartão<span class="text-danger"> * 
</span></label>
<input #nomeImpresso formControlName="digiNome"  name="holder-name" id="nomeimpresso" 
class="form-control col-lg-6" type="text"  [readonly]="cardSelect" >

Yes, but your title needs improvement. It's not a sentence. See [ask]. — isherwood, Feb 09 '22 at 14:06
It is same for angular buddy. Angular is just framework. If you want you can try material. There you can get another approach. But in backend everything is same. — Amit Gandole, Feb 09 '22 at 15:30
@AmitGandole I understand, but it wouldn't work because it puts a class as disabled, I needed that when the variable was true it was disabled — Leonardo, Feb 09 '22 at 15:33
You dont have clarification of your own problem. It works in this way only. [disabled]="yourVariable". — Amit Gandole, Feb 09 '22 at 15:45

nlko · Answer 1 · 2022-02-10T17:27:14.290

0

As stated by @rmjoia, my previous answer is dangerous and should be avoided (see below).

Updated answer

For disabling the whole "select" element you can use a boolean variable declared in your controller (isDisabled in my following example)

In the HTML:

<select [disabled]="isDisabled">
  <option>a</option>
</select>

In the controller:

export class AppComponent {
  …

  // the variable declaration (at start the select is enabled)
  isDisabled = false;

  // later you may change the state of the select element.
  onClick() {
    this.isDisabled = true;
  }
}

Some code implementing different solutions : https://stackblitz.com/edit/angular-ivy-qkwier?file=src/app/app.component.html

Previous answer

For disabling the whole "select" element you can :

  <select … [disabled]="isSelectDisabled()">
  …
  </select>

and decide in your controller the logic behind the isSelectDisabled method.

edited Feb 10 '22 at 17:27

answered Feb 09 '22 at 14:05

nlko

151
1
6

I couldn't understand, I wanted that when cardselect was true the button was disabled – Leonardo Feb 09 '22 at 14:10
1

Just be careful when using this approach with the default change detection mechanism, `isSelectDisabled()` may be called more times than needed, put a `console.log()` inside and check how many times is being called. – rmjoia Feb 10 '22 at 08:21
@rmjoia You're right the function is called several times unless ChangeDetectionStrategy.OnPush is used as change detection mechanism. I'll edit my answer accordingly. – nlko Feb 10 '22 at 17:10
1

The recommended way is to use the condition directly, property or use a pure pipe. This is a good post about that https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496 – rmjoia Feb 11 '22 at 09:08

Sven · Answer 2 · 2022-02-09T14:15:21.840

0

try [disabled]="cardSelect" or if that didn't work [attr.disabled]="!editable ? '' : null" as a workaround.

edited Feb 09 '22 at 14:15

answered Feb 09 '22 at 14:07

Sven

66
4

did not work, the field remained enabled – Leonardo Feb 09 '22 at 14:09
How about [attr.disabled]="!editable ? '' : null"? That's a workaround I found somewhere. – Sven Feb 09 '22 at 14:14
ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '?' is not a valid attribute name. Error: Failed to execute 'setAttribute' on 'Element': '?' is not a valid attribute name. – Leonardo Feb 09 '22 at 14:16

How to disable or readonly select input angular

2 Answers2