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!
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With