Cómo deshabilitar una entrada en angular2

123

En ts is_edit = truepara deshabilitar ...

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

Simplemente quiero deshabilitar una entrada basada en trueo false.

Intenté lo siguiente:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"
Tampa
fuente
10
Ya hizo esta pregunta y ya tenía una respuesta, pero luego la eliminó. Nuevamente, abra la consola del navegador para notar los errores, corríjalos (es decir, use el nombre y no formControlName), y luego, funciona: plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview
JB Nizet
El verdadero problema aquí es que estás mezclando formas basadas en plantillas con formas reactivas. Use uno u otro, no ambos. @ AJT_82 tiene la respuesta correcta.
adam0101

Respuestas:

316

Intenta usar attr.disabled, en lugar dedisabled

<input [attr.disabled]="disabled ? '' : null"/>
Fedtuck
fuente
55
Establecer el valor de atributo en nulo para NO agregar el atributo al elemento, parece un truco, pero en realidad funciona, e incluso tiene sentido, en retrospectiva.
c69
2
disabledes igual trueofalse
Belter
18
¡Gracias por una respuesta que realmente funciona! Entonces, ¿por qué attr.disabledfunciona cuando disabledno?
Dylanthepiguy
55
Si bien esto funciona, es un truco que no aborda el problema real de mezclar formas basadas en plantillas con formas reactivas. El OP debe usar uno u otro, no ambos.
adam0101
2
<input [attr.disabled] = "disabled || null" /> Creo que también funciona
Francesco
41

Creo que descubrí el problema, este campo de entrada es parte de una forma reactiva (?), Ya que lo has incluido formControlName. Esto significa que lo que está intentando hacer al deshabilitar el campo de entrada is_editno funciona, por ejemplo, su intento [disabled]="is_edit", que en otros casos funcionaría. Con su formulario debe hacer algo como esto:

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

y perder is_edittodo por completo.

si desea que el campo de entrada esté deshabilitado de forma predeterminada, debe configurar el control de formulario como:

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

Aquí hay un saqueador

AJT82
fuente
30

Simplemente podrías hacer esto

<input [disabled]="true" id="name" type="text">
Ifesinachi Bryan
fuente
1
Si bien esto funciona, sugiere que "falso" habilitaría el control, lo que no sucede ya que la presencia del atributo deshabilitado es lo que ha marcado el control, no el valor.
Mecaveli
@Mecaveli, establecer [deshabilitado] en falso realmente habilita el control. <input [disabled] = "false" id = "name" type = "text"> habilita el campo de entrada. Puede verificar su aplicación angular.
Ifesinachi Bryan
1
Solo para corregirme aquí: como aprendí, [disabled] en realidad no controla el valor del atributo html "disabled" como lo haría [attr.disabled]. Por lo tanto, [disabled] = "false" funciona, aunque "false" como valor para el atributo html "disabled" no lo haría.
Mecaveli
66
Entonces, en general, debería usar su editor y probarlo antes de mostrar un contrapunto.
Ifesinachi Bryan
De hecho, perdón por el voto negativo, lamentablemente no puedo deshacerlo ahora. Estaba usando mal [attr.disabled] durante años pensando (o más bien no pensando mucho) es igual a [desactivado] ...
Mecaveli
26

Si desea que la entrada se deshabilite en alguna declaración. uso [readonly]=trueo en falselugar de deshabilitado.

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>
Usman Saleh
fuente
1
Solución reactiva amigable.
John Deer
1
Esto es correcto. Para mí [attr.disabled] = "disabled" funcionó en un solo sentido, es decir, la entrada permaneció en el estado desactivado / habilitado inicial
spiritworld
Muchas gracias por esto !
Nazir
Nazirno hay 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
fuente
1
Si coloca el registro de la consola en el método isDisabled, se ejecutan cientos de registros de la consola. Si hay una lógica compleja en el método isDisabled, podría ser un problema. Así que no estoy seguro de que sea una buena solución.
Téwa
1
No ponga la verificación dinámica en variables angulares o obtendrá un bucle infinito. Puedes usar [disabled]="is_edit"directamente. ¿Por qué la isDisabled()función?
alex351
actualizar el código para cambiar el estado de entrada directamente.
Yoav Schniederman
7

Supongo que quisiste decir en falselugar de'false'

Además, [disabled]está esperando a Boolean. Debe evitar devolver a null.

zurfyx
fuente
4

Una nota en respuesta al comentario de Belter sobre la respuesta aceptada de fedtuck arriba, ya que me falta la reputación para agregar comentarios.

Esto no es cierto para ninguno de los que conozco, de acuerdo con los documentos de Mozilla

deshabilitado es igual a verdadero o falso

Cuando el atributo desactivado está presente, el elemento se desactiva independientemente del valor. Mira este ejemplo

<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
fuente
3
eso es cierto y totalmente cierto para Html puro, pero para angular, debe proporcionar un valor booleano para deshabilitado, especialmente cuando está haciendo un enlace bidireccional.
Ifesinachi Bryan
4

Prefiero esta solucion

En archivo HTML:

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

En el archivo TS:

dynamicVariable = false; // true based on your condition 
Anirudh
fuente
3

Lo que está buscando está deshabilitado = "verdadero" . Aquí hay un ejemplo:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>
Sumeet
fuente
66
Esto es incorrecto, el disabledatributo HTML y DOM es un "atributo booleano", lo que significa que solo se debe especificar el nombre del atributo, o su valor debe ser igual disabled, por ejemplo, disabled="disabled" - it does not recognize the values of verdadero` o false, por disabled="false"lo que aún hará que el elemento se deshabilite.
Dai
2

Manifestación

Marca is_editde 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
fuente
2

Desactivar TextBox en 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>

mella
fuente
0

Y también si el cuadro / botón de entrada debe permanecer deshabilitado, entonces simplemente <button disabled>o <input disabled>funciona.

Priyanka Arora
fuente
0

Deshabilitado Selecten angular 9.

Una cosa es tener en cuenta que el trabajo deshabilitado con booleanvalores en este ejemplo, estoy usando el (change)evento con la selectopción si el país no está seleccionado, la región estará deshabilitada.

archivo 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
fuente
-1

puede usar simplemente como

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

Lo tengo así. así que prefiero

Brock James
fuente
Esto no está configurando el atributo deshabilitado dinámicamente
Benjineer