So deaktivieren Sie eine Eingabe in angle2

123

In ts is_edit = truezu 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 basierend auf trueoder deaktivieren false.

Ich habe Folgendes versucht:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"
Tampa
quelle
10
Sie haben diese Frage bereits gestellt und hatten bereits eine Antwort, haben sie dann aber gelöscht. Öffnen Sie erneut Ihre Browserkonsole, um die Fehler zu bemerken, beheben Sie sie (dh verwenden Sie den Namen und nicht formControlName), und dann funktioniert es: plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview
JB Nizet
Das eigentliche Problem hierbei ist, dass Sie vorlagenbasierte Formulare mit reaktiven Formularen mischen. Verwenden Sie den einen oder anderen, nicht beide. @ AJT_82 hat die richtige Antwort.
Adam0101

Antworten:

316

Versuchen Sie es mit attr.disabledstattdisabled

<input [attr.disabled]="disabled ? '' : null"/>
Fedtuck
quelle
5
Das Setzen des attr-Werts auf null, um das attr NICHT zum Element hinzuzufügen - sieht aus wie ein Hack -, funktioniert aber im Nachhinein tatsächlich und macht sogar Sinn.
c69
2
disabledgleich trueoderfalse
Belter
18
Vielen Dank für eine Antwort, die tatsächlich funktioniert! Warum also attr.disabledarbeiten, wenn disablednicht?
Dylanthepiguy
4
Während dies funktioniert, ist es ein Hack, der das eigentliche Problem des Mischens von vorlagenbasierten Formularen mit reaktiven Formularen nicht angeht. Das OP sollte das eine oder das andere verwenden, nicht beide.
Adam0101
2
<input [attr.disabled] = "disabled || null" /> Ich denke, es funktioniert auch
Francesco
41

Ich denke, ich habe das Problem herausgefunden, dieses Eingabefeld ist Teil einer reaktiven Form (?), Da Sie eingeschlossen haben formControlName. Dies bedeutet, dass das, was Sie durch Deaktivieren des Eingabefelds versuchen, is_editnicht funktioniert, z. B. Ihr Versuch [disabled]="is_edit", der 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 is_editinsgesamt verlieren .

Wenn das Eingabefeld standardmäßig deaktiviert werden soll, müssen Sie das Formularsteuerelement wie folgt festlegen:

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

Hier ist ein Plunker

AJT82
quelle
30

Sie könnten dies einfach tun

<input [disabled]="true" id="name" type="text">
Ifesinachi Bryan
quelle
1
Während dies funktioniert, deutet es darauf hin, dass "false" das Steuerelement aktivieren würde, was nicht der Fall ist, da das Vorhandensein des Attributs disabled das Steuerelement deaktiviert und nicht den Wert.
Mecaveli
@Mecaveli: Wenn Sie [disabled] auf false setzen, wird die Steuerung tatsächlich aktiviert. <input [disabled] = "false" id = "name" type = "text"> aktiviert das Eingabefeld. Sie können Ihre Winkelanwendung überprüfen.
Ifesinachi Bryan
1
Nur um mich hier zu korrigieren: Wie ich erfahren habe, steuert [disabled] den HTML-Attributwert "disabled" nicht wie [attr.disabled]. Daher funktioniert [disabled] = "false", obwohl "false" als Wert für das HTML-Attribut "disable" dies nicht tun würde.
Mecaveli
6
Insgesamt sollten Sie also Ihren Editor verwenden und ausprobieren, bevor Sie einen Kontrapunkt ansprechen.
Ifesinachi Bryan
In der Tat, Entschuldigung für das Downvoting kann es jetzt leider nicht rückgängig machen. Hat [attr.disabled] jahrelang missbraucht und gedacht (oder eher nicht viel nachgedacht), dass es gleich [behindert] ist ...
Mecaveli
26

Wenn Sie möchten, dass die Eingabe für eine Anweisung deaktiviert wird. verwenden [readonly]=trueoder falsestatt deaktiviert.

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>
Usman Saleh
quelle
1
Reaktivfreundliche Lösung.
John Deer
1
Das ist richtig. Für mich funktionierte [attr.disabled] = "disabled" nur in eine Richtung, dh die Eingabe blieb im ursprünglichen deaktivierten / aktivierten Zustand
spiritworld
Vielen Dank dafür!
Nazir
Nazirkein Problem
Usman Saleh
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;
}
Yoav Schniederman
quelle
1
Wenn Sie das Konsolenprotokoll in die Methode isDisabled einfügen, werden Hunderte von Konsolenprotokollen ausgeführt. Wenn die isDisabled-Methode eine komplexe Logik enthält, liegt möglicherweise ein Problem vor. Ich bin mir also nicht sicher, ob dies eine gute Lösung ist.
Téwa
1
Setzen Sie keine dynamische Prüfung in Winkelvariablen ein, da sonst eine Endlosschleife entsteht. Sie können [disabled]="is_edit"direkt verwenden. Warum die isDisabled()Funktion?
Alex351
Code aktualisieren, um den Eingabestatus direkt zu ändern.
Yoav Schniederman
7

Ich nehme an, du meintest falsestatt'false'

Auch [disabled]erwartet ein Boolean. Sie sollten vermeiden, a zurückzugeben null.

zurfyx
quelle
4

Eine Notiz als Antwort auf Belters Kommentar zu Fedtucks akzeptierter Antwort oben, da mir der Ruf fehlt, Kommentare hinzuzufügen.

Dies gilt nicht für die mir bekannten, gemäß den Mozilla-Dokumenten

deaktiviert ist gleich wahr oder falsch

Wenn das Attribut disabled 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"/>
Severin
quelle
3
Das ist wahr und ganz richtig für reines HTML, aber für Winkel müssen Sie einen booleschen Wert für deaktiviert angeben, insbesondere wenn Sie eine bidirektionale Bindung durchführen.
Ifesinachi Bryan
4

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 
Anirudh
quelle
3

Was Sie suchen, ist deaktiviert = "wahr" . Hier ist ein Beispiel:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>
Sumeet
quelle
6
Dies ist falsch, das HTML- und DOM- disabledAttribut ist ein "boolesches Attribut", was bedeutet, dass nur der Attributname angegeben werden muss - oder sein Wert muss gleich sein disabled, z. B. disabled="disabled" - it does not recognize the values of true` oder false- , wodurch disabled="false"das Element weiterhin deaktiviert wird.
Dai
2

Demo

make is_editvom Typ 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;
  }
}
Ajey
quelle
2

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>

Nick
quelle
0

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

Priyanka Arora
quelle
0

Deaktiviert Selectin Winkel 9.

Beachten Sie, dass die Arbeit mit booleanWerten in diesem Beispiel deaktiviert ist. Ich verwende das (change)Ereignis mit der selectOption, wenn das Land nicht ausgewählt ist. Die Region wird deaktiviert.

find.component.ts Datei

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>
Saad Abbasi
quelle
-1

kann einfach wie verwenden

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

Ich habe es so verstanden. also bevorzuge ich.

Brock James
quelle
Dies setzt das deaktivierte Attribut nicht dynamisch
Benjineer