0

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.

Kamil Naja
  • 6,267
  • 6
  • 33
  • 47
mhfour
  • 255
  • 2
  • 8
  • 19
  • 2
    https://stackblitz.com/edit/angular-uazb2n it's working..... can you reproduce the issue? – Pranav C Balan Apr 09 '19 at 04:39
  • @PranavCBalan i reproduced and it works as expected but it doesn't on my page – mhfour Apr 09 '19 at 04:55
  • problem is related something else in your code.... share full code – Pranav C Balan Apr 09 '19 at 04:57
  • 2
    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 Apr 09 '19 at 05: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 Apr 09 '19 at 05:22
  • I mean, I'm literally guessing. Hard to tell what is happening, we're only seeing a small snippet of the real code. – cristian.t Apr 09 '19 at 05:34
  • https://stackoverflow.com/questions/47937639/how-to-make-a-disabled-reactive-form-editable-in-angular2 – Eliseo Apr 09 '19 at 06:29

1 Answers1

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

wentjun
  • 40,384
  • 10
  • 95
  • 107
  • 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 – mhfour Apr 09 '19 at 07:34
  • 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 Apr 09 '19 at 07:58
  • @mhfour I'll get back to you soon after my working hours – wentjun Apr 09 '19 at 09:11
  • hi, i just remembered about this and was wondering if there was a way to do this? – mhfour Apr 23 '19 at 06:18
  • @mhfour Sorry for the late reply. Have you thought of grouping the input and its corresponding checkbox in a FormGroup? – wentjun Apr 23 '19 at 08:01
  • do you mean each input and its checkbox should be grouped in their own FormGroup? currently, everything is in one FormGroup – mhfour Apr 23 '19 at 09:01
  • @mhfour I will post a short snippet on my answer shortly. Just to check, how many of those input/checkbox pairs are there on your form? – wentjun Apr 23 '19 at 09:12
  • i have a few forms and it varies from form to form. there is at least 5 per form – mhfour Apr 23 '19 at 09:17
  • hi, are you able to post the snippet? – mhfour Apr 24 '19 at 02:11