deshabilitar - disabled button angular 5

Cómo deshabilitar una entrada en angular2

Question

En ts is_edit = true para 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 true o false .

Intenté lo siguiente:

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

Answer 1

Creo que descubrí el problema, este campo de entrada es parte de un formulario reactivo (?), Ya que ha incluido formControlName . Esto significa que lo que está intentando hacer al deshabilitar el campo de entrada con is_edit no está funcionando, 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 el is_edit completo.

si desea que el campo de entrada se deshabilite de manera predeterminada, debe configurar el control de formulario como:

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

Aquí hay un plunker

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

Answer 3

Intente usar attr.disabled , en lugar de disabled

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

Answer 4

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

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

Answer 5

Prefiero esta solucion

En archivo HTML:

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

En el archivo TS:

dynamicVariable = false; // true based on your condition 

Answer 6

Si desea que la entrada se deshabilite en alguna declaración. use [readonly]=true o false lugar de deshabilitado.

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

Answer 7

Simplemente podrías hacer esto

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

Answer 8

Supongo que quisiste decir false lugar de ''false''

Además, [disabled] espera un Boolean . Debe evitar devolver un null .

Answer 9

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

Answer 10

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

Answer 11

puede usar simplemente como

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

Lo tengo así. así que prefiero

Answer 12

Demo

make is_edit de tipo 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;
  }
}

Answer 13

<input [disabled]="isDisabled()" id="name" type="text">

export class AppComponent {
  name:string;
  is_edit : boolean = false;


 isDisabled() : boolean{
   return this.is_edit;
 }
}