Como desativar uma entrada no angular2


123

Em ts is_edit = truepara desativar ...

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

Eu simplesmente quero desativar uma entrada com base em trueou false.

Eu tentei o seguinte:

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

10
Você já fez esta pergunta e já teve uma resposta, mas a excluiu. Novamente, abra o console do navegador para observar os erros, corrija-os (por exemplo, use name e não formControlName) e, em seguida, funcione: plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview
JB Nizet

O verdadeiro problema aqui é que você está misturando formulários baseados em modelos com formulários reativos. Use um ou outro, não ambos. @ AJT_82 tem a resposta correta.
Adam0101

Respostas:


316

Tente usar attr.disabled, em vez dedisabled

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

5
Definir valor de attr como nulo para NÃO adicionar o elemento attr ao item - parece um hack - mas ele realmente funciona e até faz sentido, em uma retrospectiva.
C69

2
disabledé igual a trueoufalse
Belter

18
Obrigado por uma resposta que realmente funcione! Então, por que attr.disabledfunciona quando disablednão funciona?
Dylanthepiguy

5
Enquanto isso funciona, é um hack que não aborda o problema real de misturar formulários baseados em modelos com formulários reativos. O OP deve estar usando um ou outro, não ambos.
Adam0101

2
<input [attr.disabled] = "disabled || null" /> Acho que também funciona
Francesco

41

Acho que descobri o problema, esse campo de entrada faz parte de uma forma reativa (?), Desde que você incluiu formControlName. Isso significa que o que você está tentando fazer desativando o campo de entrada is_editnão está funcionando, por exemplo, sua tentativa [disabled]="is_edit", o que em outros casos funcionaria. Com seu formulário, você precisa fazer algo assim:

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

e perder is_editcompletamente.

se você deseja que o campo de entrada seja desabilitado como padrão, defina o controle de formulário como:

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

Aqui está um plunker


30

Você poderia simplesmente fazer isso

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

1
Enquanto isso funciona, sugere que "false" ativaria o controle, o que não ocorre, pois a presença do atributo desativado é o que modificou o controle, não o valor.
Mecaveli 18/10/19

@Mecaveli, definir [desativado] como false realmente habilita o controle. <input [disabled] = "false" id = "name" type = "text"> ativa o campo de entrada. Você pode verificar sua aplicação angular.
Ifesinachi Bryan

1
Apenas para me corrigir aqui: Como eu aprendi, [disabled] na verdade não controla o valor do atributo html "disabled" como [attr.disabled] faria. Portanto, [disabled] = "false" funciona, embora "false" como valor para o atributo html "disable" não funcione.
Mecaveli 12/11

6
Portanto, você deve realmente usar o seu editor e testá-lo antes de abrir um contra-ponto.
Ifesinachi Bryan

Na verdade, desculpe-me por reduzir a votação, infelizmente, não pode desfazê-lo agora. Foi mau uso [attr.disabled] por anos a pensar (ou melhor, não pensar muito) IT'S igual a [desativado] ...
Mecaveli

26

Se você deseja que a entrada seja desativada em alguma instrução. use [readonly]=trueou em falsevez de desabilitado.

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

1
Solução reativa.
John cervos

1
Isto está certo. Para mim [attr.disabled] = "desativado" trabalhou one-way única entrada ou seja ficado em / desativado inicial habilitado estado
spiritworld

Muito obrigado por isso!
Nazir

Nazirnão há problema
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
Se você colocar o log do console no método isDisabled, há centenas de log do console sendo executados. Se houver uma lógica complexa no método isDisabled, pode ser um problema. Portanto, não tenho certeza se essa é uma boa solução.
Téwa 21/12/19

1
Não coloque a verificação dinâmica em variáveis ​​angulares ou obterá um loop infinito. Você pode usar [disabled]="is_edit"diretamente. Por que a isDisabled()função?
alex351

atualize o código para alterar o status de entrada diretamente.
Yoav Schniederman 25/06

7

Eu presumo que você quis dizer, em falsevez de'false'

Além disso, [disabled]está esperando a Boolean. Você deve evitar retornar a null.


4

Uma observação em resposta ao comentário de Belter sobre a resposta aceita pelo fedtuck acima, pois não tenho a reputação de adicionar comentários.

Isso não é verdade para nenhum dos meus conhecimentos, de acordo com os documentos do Mozilla

desativado é igual a verdadeiro ou falso

Quando o atributo desativado está presente, o elemento é desativado, independentemente do valor. Veja este exemplo

<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
isso é verdadeiro e totalmente verdadeiro para o Html puro, mas para o angular, você deve fornecer um valor booleano para desabilitado, especialmente quando você está vinculando duas vias.
Ifesinachi Bryan 8/18

4

Eu prefiro esta solução

No arquivo HTML:

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

No arquivo TS:

dynamicVariable = false; // true based on your condition 

3

O que você está procurando é desativado = "true" . Aqui está um exemplo:

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

6
Isso está incorreto, o disabledatributo HTML e DOM é um "atributo booleano", o que significa que apenas o nome do atributo precisa ser especificado - ou seu valor deve ser igual disabled, por exemplo, disabled="disabled" - it does not recognize the values of true` ou false- disabled="false"ainda assim o elemento será desativado.
Dai

2

Demo

make is_editdo tipo booleano.

<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

Desativar TextBox no 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

E também se a caixa / botão de entrada precisar permanecer desativada, simplesmente <button disabled>ou <input disabled>funcione.


0

Desativado Selectna angular 9.

lembre-se de que o trabalho desabilitado com booleanvalores neste exemplo, estou usando o (change)evento com a selectopção se o país não estiver selecionado. A região será desabilitada.

arquivo 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>

-1

pode usar simplesmente como

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

Entendi assim. então eu prefiro.


Isso não está definindo o atributo desabilitado dinamicamente
Benjineer
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.