Angular 6 - unable to disable input textbox

Question

I would like to disable my textbox when a checkbox is checked. Problem is, I can't even disable it in the first place without any condition.

This is my HTML:

<label for="checkbox-inline">
    <input type="checkbox" class="checkbox other" name="others" value="15"
        #goodsOthersChk (change)="onCheckArray($event, Form.value.goods)">
    <p class="otherText"> Others:</p>
    <input id="goodsOthers" name="goodsOthers"
        formControlName="goodsOthers" type="text" value=""
        class="form-control otherInput" size="30%" [disabled]="isDisabled">
</label>

my component.ts:

export class GoodsComponent implements OnInit {
  isDisabled = true;
}

I don't see what I'm missing. When I inspect the textbox, it has a property of ng-reflect-is-disabled which is set to true but does not reflect on my page.

stackblitz.com/edit/angular-uazb2n it's working..... can you reproduce the issue? — Pranav C Balan
– Pranav C Balan, Commented Apr 9, 2019 at 4:39
@PranavCBalan i reproduced and it works as expected but it doesn't on my page — mhfour
– mhfour, Commented Apr 9, 2019 at 4:55
problem is related something else in your code.... share full code — Pranav C Balan
– Pranav C Balan, Commented Apr 9, 2019 at 4:57
I see a formControlName directive on it. The [disabled] property will not work with Reactive Forms. Use the disabled property on the FormControl in TypeScript instead. — cristian.t
– cristian.t, Commented Apr 9, 2019 at 5:14
@cristian.t is correct. You should not use the [disabled] property to disable a form control using reactive forms. Currently it gives a warning in console, later this will be deprecated and give errors. — Sachin Gupta
– Sachin Gupta, Commented Apr 9, 2019 at 5:22

wentjun · Accepted Answer · 2019-04-09 05:23:03Z

1

I think that is because you are using Reactive Forms. Theoretically speaking, you can use the disabled attribute, but the Reactive Form way of doing things would be to set the disabled property when you initialise the FormGroup.

yourFrom: FormGroup = this.formBuilder.group({
  goodsOthers: [{ value: null, disabled: true }],
  .
  .
  // other Form controls
})

Other FormControl properties

answered Apr 9, 2019 at 5:23

wentjun

42.8k10 gold badges107 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mhfour Over a year ago

hi this works. thanks! btw, i would like to toggle between disable and enable a textbox using a checkbox. how can i do this if i have more than one textbox which i need to apply it to? i am able to do it for one but am not entirely sure how to do it for more than one

wentjun Over a year ago

You're welcome! I see. Is each textbox 'connected' to its own individual checkbox? Or are you using this single checkbox to toggle the disabled attribute of all textboxes?

wentjun Over a year ago

@mhfour I'll get back to you soon after my working hours

mhfour Over a year ago

hi, i just remembered about this and was wondering if there was a way to do this?

wentjun Over a year ago

@mhfour Sorry for the late reply. Have you thought of grouping the input and its corresponding checkbox in a FormGroup?

|

Collectives™ on Stack Overflow

Angular 6 - unable to disable input textbox

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related