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"

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

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


30

Simplemente podrías hacer esto

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

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>

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

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.


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

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 

3

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

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

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

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>


0

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


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>

-1

puede usar simplemente como

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

Lo tengo así. así que prefiero


Esto no está configurando el atributo deshabilitado dinámicamente
Benjineer
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.