0

I have two radio buttons followed by each text box when I select one of the radios the respective text box should be enabled and the other text should be disabled.

For reference, I'm attaching a stackblitz code where I tried replicating the issue. Well, this is happening only when I use to try to disable the text box within a form.

Sample code - click here

It's really wired I tried all sources but unfortunately unable to get a solution. I have also tried to use form control methods like disable() enable() and nothing was giving the solution.

kishore
  • 356
  • 1
  • 3
  • 20
  • You can log the event and check console. You need to update the conditions. Or subscribe on radio valueChanges and update accordingly. – Sachin Gupta Mar 18 '21 at 07:46
  • @SachinGupta I tried it and I'm getting my change value on my radio input but the problem here is text box disable property is not working as expected. – kishore Mar 18 '21 at 07:48
  • It will work if you remove the formControlName. So, it means the problem is there. Try to find that out why. – rdr20 Mar 18 '21 at 08:11
  • @rdr20 I tried removing the formControlName on the radio still it did not work. Cannot remove it from the textbox because I need the value when trying to save and I'll have such radio-text box blocks many, as mentioned it is a dynamic form. – kishore Mar 18 '21 at 08:16
  • on the textbox if you will remove the formcontrolname it will work. but ii know you need that. but, you can start from there. – rdr20 Mar 18 '21 at 08:19
  • @rdr20 yes of course that is working when I removed the formcontrolname on the textbox, but like I said I cannot get the values of my text box. – kishore Mar 18 '21 at 08:22

3 Answers3

1

You could try this as a workaround then. Just find a better solution later. But the following works.

[attr.disabled]="radio2BoxDisabled ? true: null"
rdr20
  • 186
  • 7
  • How did I miss such a small logic, and also I figured out instead of disable we can use [readonly]= "radio2BoxDisabled" does what is expected. – kishore Mar 18 '21 at 08:36
0

Change your toggle() function to the code below. It works with the version of your Stackblitz code that had form control names in. Of course, with more than one form group you will have to manage the indexes in another way.

  toggle(event) {
    if (event.value == "radio1") {
      this.t.at(0).get ('ref').enable();
      this.t.at(0).get ('link').disable();
    } else if (event.value == "radio2") {
      this.t.at(0).get ('ref').disable();
      this.t.at(0).get ('link').enable();
    }
  }
Trismuto
  • 396
  • 2
  • 5
0

You cannot simply disabled directly inputs with form controls. You need to initialize it in the form builder

this.formBuilder.group({
          radio: [""],
          ref: [{value:'', disabled: this.radio2BoxDisabled}],
          link: [{value:'', disabled: this.radio1BoxDisabled}]
        })

I already updated your StackBlitz see it here: https://stackblitz.com/edit/angular-ivy-mswvnb?file=src%2Fapp%2Fapp.component.ts

See more explanation about your issue: Disable Input fields in reactive form

Stacks Queue
  • 848
  • 7
  • 18