web-dev-qa-db-fra.com

Comment désactiver une entrée dans angular2

Dans ts is_edit = true pour 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 simplement désactiver une entrée basée sur true ou false.

J'ai essayé de suivre:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"
angularangular-reactive-formsdisabled-input
56
Tampa

Essayez d'utiliser attr.disabled au lieu de disabled

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

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_edit ne fonctionne pas, par exemple votre tentative [disabled]="is_edit", ce qui fonctionnerait dans d'autres cas. 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_edit tout à fait.

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

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

Voici un plunker

25
AJT_82

Vous pouvez simplement faire ceci

<input [disabled]="true" id="name" type="text">
15
Ifesinachi Bryan
<input [disabled]="isDisabled()" id="name" type="text">

export class AppComponent {
  name:string;
  is_edit : boolean = false;


 isDisabled() : boolean{
   return this.is_edit;
 }
}
9
Yoav Schniederman

Si vous souhaitez que les entrées soient désactivées dans une instruction ..__, utilisez [readonly]=true ou false au lieu de disabled.

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

Je suppose que vous vouliez dire false au lieu de 'false'

En outre, [disabled] attend une Boolean. Vous devriez éviter de renvoyer une null.

5
zurfyx

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

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

Une note en réponse au commentaire de Belter sur la réponse acceptée de fedtuck ci-dessus, car il me manque la réputation pour ajouter des commentaires. 

Ce n’est le cas pour aucun de ceux dont je suis au courant, conformément au docs Mozilla

désactivé égal à vrai ou faux

Lorsque l'attribut disabled est présent, l'élément est désactivé quelle que soit la 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
severin

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>
1
Rahul Seth

Je préfère cette solution

En fichier HTML:

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

Dans le fichier TS:

dynamicVariable = false; // true based on your condition
1
Anirudh

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

0
Priyanka Arora

peut utiliser simplement comme

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

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

0
Brock James

Démo

make is_edit de type boolean.

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

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