How to disable input in angular2

Question

In ts, is_edit = truedisable ...

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

I just want to disable input based on trueor false.

I tried the following:

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

Answer 1

Try using attr.disabledinsteaddisabled

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

Answer 2

I think I understood the problem, this input field is part of the reactive form (?) Since you included formControlName. This means that what you are trying to do by disabling the input field with is_editdoes not work, for example, your attempt [disabled]="is_edit", which in other cases will work. With your form, you need to do something like this:

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

is_edit.

, , :

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

plunker

Answer 3

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

Answer 4

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

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


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

Answer 5

. [readonly]=true false .

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

Answer 6

, false 'false'

, [disabled] a Boolean. null.

Answer 7

, , disabled = "true" . :

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

Answer 8

fedtuck , .

, Mozilla

disabled true false

disabled , . .

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

---

TextBox 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 10

HTML :

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

TS:

dynamicVariable = false; // true based on your condition 

Answer 11

is_edit 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 12

, / , <button disabled> <input disabled>.

Answer 13

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

. .