Comment désactiver une entrée dans angular2


123

In ts is_edit = truepour désactiver ...

<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">

Je veux simplement désactiver une entrée basée sur trueou false.

J'ai essayé de suivre:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"

10
Vous avez déjà posé cette question et avez déjà eu une réponse, mais vous avez ensuite supprimé la question. Encore une fois, ouvrez la console de votre navigateur pour remarquer les erreurs, corrigez-les (c'est-à-dire utilisez name et non formControlName), puis cela fonctionne: plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview
JB Nizet

Le vrai problème ici est que vous mélangez des formulaires basés sur des modèles avec des formulaires réactifs. Utilisez l'un ou l'autre, pas les deux. @ AJT_82 a la bonne réponse.
adam0101

Réponses:


317

Essayez d'utiliser attr.disabled, au lieu dedisabled

<input [attr.disabled]="disabled ? '' : null"/>

5
Définir la valeur de attr sur null afin de NE PAS ajouter l'attr à l'élément - cela ressemble à un hack - mais cela fonctionne réellement, et même fait sens, avec le recul.
c69

2
disabledéquivaut à trueoufalse
Belter

18
Merci pour une réponse qui fonctionne réellement! Alors pourquoi ça attr.disabledmarche quand disabledça ne marche pas?
Dylanthepiguy

5
Bien que cela fonctionne, c'est un hack qui ne résout pas le vrai problème du mélange de formulaires basés sur des modèles avec des formulaires réactifs. Le PO doit utiliser l'un ou l'autre, pas les deux.
adam0101

2
<input [attr.disabled] = "disabled || null" /> Je pense que ça marche aussi
Francesco

41

Je pense avoir compris le problème, ce champ de saisie fait partie d'un formulaire réactif (?), Puisque vous avez inclus formControlName . Cela signifie que ce que vous essayez de faire en désactivant le champ de saisie avec is_editne fonctionne pas, par exemple votre tentative [disabled]="is_edit", qui dans d'autres cas fonctionnerait. Avec votre formulaire, vous devez faire quelque chose comme ceci:

toggle() {
  let control = this.myForm.get('name')
  control.disabled ? control.enable() : control.disable();
}

et perdre le is_edittout.

si vous souhaitez que le champ de saisie soit désactivé par défaut, vous devez définir le contrôle de formulaire comme:

name: [{value: '', disabled:true}]

Voici un plunker


30

Vous pouvez simplement le faire

<input [disabled]="true" id="name" type="text">

1
Bien que cela fonctionne, cela suggère que "false" activerait le contrôle, ce qui n'est pas le cas puisque la présence de l'attribut désactivé est ce qui a désactivé le contrôle, pas la valeur.
Mecaveli

@Mecaveli, définir [disabled] sur false active réellement le contrôle. <input [disabled] = "false" id = "name" type = "text"> rend le champ de saisie activé. Vous pouvez vérifier votre application angulaire.
Ifesinachi Bryan

1
Juste pour me corriger ici: comme je l'ai appris, [disabled] ne contrôle pas réellement la valeur de l'attribut HTML "disabled" comme le ferait [attr.disabled]. Par conséquent, [disabled] = "false" fonctionne bien que "false" comme valeur pour l'attribut html "disable" ne le ferait pas.
Mecaveli

6
Donc, dans l'ensemble, vous devriez réellement utiliser votre éditeur et l'essayer avant de faire apparaître un contre-point.
Ifesinachi Bryan

En effet, désolé pour le vote négatif ne peut malheureusement pas l'annuler maintenant. A abusé [attr.disabled] pendant des années en pensant (ou plutôt pas en pensant) que c'est égal à [handicapé] ...
Mecaveli

26

Si vous voulez que l'entrée soit désactivée sur une instruction. utiliser [readonly]=trueou falseau lieu de désactivé.

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>

1
Solution adaptée aux réactifs.
John Deer

1
C'est correct. Pour moi [attr.disabled] = "disabled" ne fonctionnait que dans un sens, c'est-à-dire que l'entrée est restée à l'état initial désactivé / activé
spiritworld

Merci beaucoup pour cela !
Nazir le

Nazirpas de problème
Usman Saleh le

13
<input [disabled]="is_edit" id="name" type="text">
<button (click)="is_edit = !is_edit">Change input state</button>

export class AppComponent {
  is_edit : boolean = false;
}

1
Si vous placez le journal de la console dans la méthode isDisabled, des centaines de journaux de console sont exécutés. S'il existe une logique complexe dans la méthode isDisabled, cela peut être un problème. Je ne suis donc pas sûr que ce soit une bonne solution.
Téwa

1
Ne mettez pas de vérification dynamique dans les variables angulaires ou vous obtenez une boucle infinie. Vous pouvez utiliser [disabled]="is_edit"directement. Pourquoi la isDisabled()fonction?
alex351

mettre à jour le code pour changer directement l'état de l'entrée.
Yoav Schniederman le

7

Je suppose que tu voulais dire false au lieu de'false'

Attend également [disabled]un Boolean. Vous devez éviter de renvoyer un fichier null.


4

Une note en réponse au commentaire de Belter sur la réponse acceptée de fedtuck ci-dessus, car je n'ai pas la réputation d'ajouter des commentaires.

Ce n'est pas vrai pour tout ce que je connais, conformément à la documentation de Mozilla

désactivé est égal à vrai ou faux

Lorsque l'attribut désactivé est présent, l'élément est désactivé quelle que soit sa valeur. Voir cet exemple

<input placeholder="i can be changed"/>
<input disabled placeholder="i can NOT be changed"/>
<input disabled="true" placeholder="i can NOT be changed"/>
<input disabled="false" placeholder="i can NOT be changed"/>

3
c'est vrai et tout à fait vrai pour le Html pur, mais pour angular, vous devez fournir une valeur booléenne pour disabled, en particulier lorsque vous effectuez une liaison bidirectionnelle.
Ifesinachi Bryan

4

Je préfère cette solution

Dans un fichier HTML:

<input [disabled]="dynamicVariable" id="name" type="text">

Dans le fichier TS:

dynamicVariable = false; // true based on your condition 

3

Ce que vous recherchez est disabled = "true" . Voici un exemple:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>

6
Ceci est incorrect, l' disabledattribut HTML et DOM est un "attribut booléen" ce qui signifie que seul le nom de l'attribut doit être spécifié - ou sa valeur doit être égale disabled, par exemple disabled="disabled" - it does not recognize the values of true` ou false- cela disabled="false"entraînera toujours la désactivation de l'élément.
Dai

2

Démo

marque is_editde type booléen.

<input [disabled]=is_edit id="name" type="text">

export class App {
  name:string;
  is_edit: boolean; 
  constructor() {
    this.name = 'Angular2'
    this.is_edit = true;
  }
}

2

Désactiver TextBox dans Angular 7

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>


0

Et aussi si la zone de saisie / le bouton doit rester désactivé, alors simplement <button disabled>ou <input disabled>fonctionne.


0

Désactivé Selecten angulaire 9.

une chose garder à l'esprit le travail désactivé avec des booleanvaleurs dans cet exemple, j'utilise l' (change)événement avec l' selectoption si le pays n'est pas sélectionné, la région sera désactivée.

fichier find.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.css']
})
export class FindComponent implements OnInit {
  isCountrySelected:boolean;

  constructor() { }
  //onchange event disabled false
 onChangeCountry(id:number){
   this.isCountrySelected = false;
 }
  ngOnInit(): void {
    //initially disabled true
    this.isCountrySelected = true;
  }

}

find.component.html

//Country select option
<select  class="form-control"  (change)="onChangeCountry()" value="Choose Country">
                    <option value="">Choose a Country</option>
                    <option value="US">United States</option>
                     
</select>
//region disabled till country is not selected 
<select class="form-control" [disabled]="isCountrySelected">
                    <option value="">Choose a Region</option>
                    <option value="">Any regions.</option>
                    
                </select>

-1

peut utiliser simplement comme

     <input [(ngModel)]="model.name" disabled="disabled"

Je l'ai comme ça. donc je préfère.


Cela ne définit pas l'attribut désactivé dynamiquement
Benjineer
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.