Jak wyłączyć wejście w angular2

123

W ts, is_edit = trueaby wyłączyć ...

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

Chcę po prostu wyłączyć dane wejściowe oparte na truelub false.

Próbowałem śledzić:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"
Tampa
źródło
10
Już zadałeś to pytanie i już miałeś odpowiedź, ale potem usunąłeś pytanie. Ponownie otwórz konsolę przeglądarki, aby zauważyć błędy, napraw je (tj. Użyj nazwy, a nie formControlName), a potem działa: plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview
JB Nizet
Prawdziwy problem polega na tym, że mieszasz formularze oparte na szablonach z formularzami reaktywnymi. Użyj jednego lub drugiego, a nie obu. @ AJT_82 ma poprawną odpowiedź.
adam0101

Odpowiedzi:

318

Spróbuj użyć attr.disabledzamiastdisabled

<input [attr.disabled]="disabled ? '' : null"/>
fedtuck
źródło
5
Ustawienie wartości attr na null, aby NIE dodawać atr do elementu - wygląda jak hack - ale faktycznie działa, a nawet ma sens z perspektywy czasu.
c69
2
disabledrówna się truelubfalse
Belter
18
Dziękuję za odpowiedź, która faktycznie działa! Dlaczego więc attr.disableddziała, kiedy disablednie?
Dylanthepiguy
5
Chociaż to działa, jest to sztuczka, która nie rozwiązuje prawdziwego problemu mieszania formularzy opartych na szablonach z formularzami reaktywnymi. OP powinien używać jednego lub drugiego, a nie obu.
adam0101
2
<input [attr.disabled] = "disabled || null" /> Myślę, że też działa
Francesco
41

Myślę, że rozwiązałem problem, to pole wejściowe jest częścią formularza reaktywnego (?), Ponieważ włączyłeś formControlName. Oznacza to, że to, co próbujesz zrobić, wyłączając pole wprowadzania danych, is_editnie działa, np. Twoja próba [disabled]="is_edit", która w innych przypadkach zadziała. W swoim formularzu musisz zrobić coś takiego:

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

i is_editcałkowicie stracić .

jeśli chcesz, aby pole wejściowe było domyślnie wyłączone, musisz ustawić kontrolkę formularza jako:

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

Oto plunker

AJT82
źródło
30

Możesz to po prostu zrobić

<input [disabled]="true" id="name" type="text">
Ifesinachi Bryan
źródło
1
Chociaż to działa, sugeruje, że "false" włączy kontrolę, czego nie robi, ponieważ obecność atrybutu disabled jest tym, co spowodowało błąd kontrolki, a nie wartością.
Mecaveli
@Mecaveli, ustawienie [wyłączone] na false faktycznie włącza kontrolę. <input [disabled] = "false" id = "name" type = "text"> włącza pole wejściowe. Możesz sprawdzić swoją aplikację kątową.
Ifesinachi Bryan
1
Aby to poprawić: Jak się dowiedziałem, [disabled] w rzeczywistości nie kontroluje wartości atrybutu html „disabled”, tak jak [attr.disabled]. Dlatego [disabled] = „false” działa, chociaż „false” jako wartość atrybutu html „disable” nie.
Mecaveli,
6
Podsumowując, powinieneś faktycznie użyć swojego edytora i wypróbować go, zanim pojawi się kontrapunkt.
Ifesinachi Bryan,
Rzeczywiście, przepraszamy za odrzucenie głosów, niestety nie można tego teraz cofnąć. Nadużywał [attr.disabled] przez lata, myśląc (a raczej niewiele myśląc), równy [niepełnosprawny] ...
Mecaveli
26

Jeśli chcesz, aby dane wejściowe były wyłączone w niektórych instrukcjach. użyj [readonly]=truelub falsezamiast wyłączone.

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>
Usman Saleh
źródło
1
Rozwiązanie przyjazne dla reakcji.
John Deer,
1
To jest poprawne. Dla mnie [attr.disabled] = "wyłączone" działało tylko w jedną stronę, tzn. Wejście pozostawało początkowo wyłączone / włączone
spiritworld
Bardzo dziękuję za to!
Nazir
Nazirnie ma problemu
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
źródło
1
Jeśli umieścisz dziennik konsoli w metodzie isDisabled, wykonywane są setki dzienników konsoli. Jeśli w metodzie isDisabled występuje złożona logika, może to oznaczać problem. Nie jestem więc pewien, czy to dobre rozwiązanie.
Téwa
1
Nie wprowadzaj dynamicznego sprawdzania do zmiennych Angular lub uzyskasz nieskończoną pętlę. Możesz użyć [disabled]="is_edit"bezpośrednio. Dlaczego isDisabled()funkcja?
alex351
Zaktualizuj kod, aby bezpośrednio zmienić stan wejścia.
Yoav Schniederman
7

Zakładam, że miałeś na myśli falsezamiast'false'

Ponadto, [disabled]oczekuje Boolean. Należy unikać zwracania pliku null.

zurfyx
źródło
4

Uwaga w odpowiedzi na komentarz Beltera na temat zaakceptowanej odpowiedzi fedtucka powyżej, ponieważ nie mam reputacji, aby dodawać komentarze.

Nie dotyczy to żadnego, o czym jestem świadomy, zgodnie z dokumentacją Mozilli

wyłączone oznacza prawdę lub fałsz

Gdy atrybut disabled jest obecny, element jest wyłączony niezależnie od wartości. Zobacz ten przykład

<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
źródło
3
to prawda i całkowicie prawdziwe dla czystego HTML, ale dla kątowego, musisz podać wartość logiczną dla niepełnosprawnych, szczególnie gdy robisz dwustronne wiązanie.
Ifesinachi Bryan
4

Wolę to rozwiązanie

W pliku HTML:

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

W pliku TS:

dynamicVariable = false; // true based on your condition 
Anirudh
źródło
3

To, czego szukasz, jest wyłączone = „prawda” . Oto przykład:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>
Sumeet
źródło
6
To jest niepoprawne, disabledatrybut HTML i DOM jest „atrybutem logicznym”, co oznacza, że ​​należy podać tylko nazwę atrybutu - lub jego wartość musi być równa disabled, np. disabled="disabled" - it does not recognize the values of True` lub false- więc disabled="false"nadal spowoduje wyłączenie elementu.
Dai
2

Próbny

marka is_edittypu 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
źródło
2

Wyłącz TextBox w 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>

nacięcie
źródło
0

A także jeśli pole / przycisk wprowadzania danych musi pozostać wyłączone, to po prostu <button disabled>lub <input disabled>działa.

Priyanka Arora
źródło
0

Wyłączone Selectw kątowej 9.

jedna rzecz, pamiętaj o wyłączonej pracy z booleanwartościami w tym przykładzie, używam (change)zdarzenia z selectopcją, jeśli kraj nie jest wybrany, region zostanie wyłączony.

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>
Saad Abbasi
źródło
-1

można używać po prostu jak

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

Mam to w ten sposób. więc wolę.

Brock James
źródło
To nie ustawia atrybutu disabled dynamicznie
Benjineer