wake-up-neo.com

So deaktivieren Sie eine Eingabe in angle2

In ts is_edit = true zum deaktivieren ...

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

Ich möchte einfach nur eine Eingabe deaktivieren, die auf true oder false basiert.

Ich habe folgendes versucht:

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

Versuchen Sie es mit attr.disabled anstelle von disabled

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

Ich glaube, ich habe das Problem herausgefunden, dieses Eingabefeld ist Teil eines reaktiven Formulars (?), Da Sie formControlName eingefügt haben. Das bedeutet, dass das, was Sie durch Deaktivieren des Eingabefelds mit is_edit versuchen, nicht funktioniert, z. B. Ihr Versuch [disabled]="is_edit", was in anderen Fällen funktionieren würde. Mit Ihrem Formular müssen Sie Folgendes tun:

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

und den is_edit ganz verlieren.

wenn das Eingabefeld standardmäßig deaktiviert werden soll, müssen Sie die Formularsteuerung folgendermaßen einstellen: 

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

Hier ist ein Plunker

25
AJT_82

Sie könnten das einfach tun

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

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


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

Wenn Sie möchten, dass die Eingabe in einer Anweisung deaktiviert wird, verwenden Sie [readonly]=true oder false anstelle von disabled.

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

Ich nehme an, Sie meinten false anstelle von 'false'

Außerdem erwartet [disabled] eine Boolean. Sie sollten es vermeiden, eine null zurückzugeben.

5
zurfyx

Was Sie suchen, ist disabled = "true" . Hier ist ein Beispiel:

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

Ein Hinweis auf Belter's Kommentar zu fedtucks akzeptierter Antwort oben, da mir der Ruf fehlt, Kommentare hinzuzufügen. 

Dies gilt nicht für irgendetwas, das mir bekannt ist, in Übereinstimmung mit den Mozilla-Dokumenten

deaktiviert ist gleich wahr oder falsch

Wenn das deaktivierte Attribut vorhanden ist, wird das Element unabhängig vom Wert deaktiviert. Siehe dieses Beispiel

<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

Deaktivieren Sie TextBox in 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

Ich bevorzuge diese Lösung

In der HTML-Datei:

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

In der TS-Datei:

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

Und auch wenn das Eingabefeld/die Taste deaktiviert bleiben muss, funktioniert einfach <button disabled> oder <input disabled>.

0
Priyanka Arora

kann einfach wie

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

Ich habe es so verstanden. Also bevorzuge ich.

0
Brock James

Demo

is_edit vom Typ boolean machen.

<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