How to disable a input in angular2
In ts is_edit = true
to disable...
<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">
I just simply want to disable a input based on true
or false
.
I tried following:
[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"
Try using attr.disabled
, instead of disabled
<input [attr.disabled]="disabled ? '' : null"/>
I think I figured out the problem, this input field is part of a reactive form (?), since you have included formControlName
. This means that what you are trying to do by disabling the input field with is_edit
is not working, e.g your attempt [disabled]="is_edit"
, which would in other cases work. With your form you need to do something like this:
toggle() {
let control = this.myForm.get('name')
control.disabled ? control.enable() : control.disable();
}
and lose the is_edit
altogether.
if you want the input field to be disabled as default, you need to set the form control as:
name: [{value: '', disabled:true}]
Here's a plunker
If you want input to disable on some statement.
use [readonly]=true
or false
instead of disabled.
<input [readonly]="this.isEditable"
type="text"
formControlName="reporteeName"
class="form-control"
placeholder="Enter Name" required>
You could simply do this
<input [disabled]="true" id="name" type="text">
<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;
}