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"
Tampa
fonte
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"/>
fedtuck
fonte
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

AJT82
fonte
30

Você poderia simplesmente fazer isso

<input [disabled]="true" id="name" type="text">
Ifesinachi Bryan
fonte
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>
Usman Saleh
fonte
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;
}
Yoav Schniederman
fonte
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.

zurfyx
fonte
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"/>
severin
fonte
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 
Anirudh
fonte
3

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

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>
Sumeet
fonte
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;
  }
}
Ajey
fonte
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>

usuario
fonte
0

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

Priyanka Arora
fonte
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>
Saad Abbasi
fonte
-1

pode usar simplesmente como

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

Entendi assim. então eu prefiro.

Brock James
fonte
Isso não está definindo o atributo desabilitado dinamicamente
Benjineer