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"

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"/>

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


30

Sie könnten dies einfach tun

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

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>

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;
}

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.


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"/>

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 

3

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

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

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;
  }
}

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>


0

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


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>

-1

kann einfach wie verwenden

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

Ich habe es so verstanden. also bevorzuge ich.


Dies setzt das deaktivierte Attribut nicht dynamisch
Benjineer
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.