Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable a input in angular2

People also ask

How do I disable input?

The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable. Tip: Disabled <input> elements in a form will not be submitted!

How do you disable enable a TextBox input when radio button is selected deselected in angular?

Essentially what you really need is to implement a toggling function that changes a boolean type variable whenever the radio button is clicked. Then bind this variable to the disabled attribute of the input text box.


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