-1

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" >
Leonardo
  • 11
  • 1
  • 6

2 Answers2

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.

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
0

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

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