Angular2 Reactive Forms disable elements in form group

Question

I have a reactive form setup in my component that allows a user to edit user data within the form.

On this form, there are table rows and at the end of each row is a checkbox that disables or enables all the inputs in that row. The user essentially enables that group of input data to fill out.

Here is my form group:

slice3: this.fb.group({
    shitStatus: { value: 0 },
    hour_start: { value: '1', disabled: true },
    minute_start: { value: '00', disabled: true },
    period_start: { value: 'AM', disabled: true },
    hour_end: { value: '1', disabled: true },
    minute_end: { value: '00', disabled: true },
    period_end: { value: 'AM', disabled: true },
    days: this.fb.group({
        day_Su: { value: '', disabled: true },
        day_M: { value: '', disabled: true },
        day_Tu: { value: '', disabled: true },
        day_W: { value: '', disabled: true },
        day_Th: { value: '', disabled: true },
        day_F: { value: '', disabled: true },
        day_Sa: { value: '', disabled: true }
    })
})

I have a function that toggles all the elements in this form group when they check or uncheck the box:

toggleSlice(slice) {

  if (this.transitionForm.get('shift.slice' + slice).disabled) {
    this.transitionForm.get('shift.slice' + slice).enable();
  } else {
    this.transitionForm.get('shift.slice' + slice).disable();
  }

}

My issue is due do shiftStatus being part of the form group, it is disabling the toggle button as well which then prevents me from ever turning this set of elements back on.

Is there any way to use some type of operator in here that allows me to say Disable everything in the shift.slice except for a specific input?

In jQuery for example, I could do something like :not("blah") to say apply this logic to everything except this input.

Can anything be done with javascript that will allow me to disable all these elements within a form group except for one that I specify?

AVJT82 · Accepted Answer · 2017-07-18 09:56:39Z

3

The easiest solution I see is to disable all form controls and then just enable that one form control, I can't think about a better way. Here's just pseudo code:

if (this.myForm.get('group').disabled) {
  this.myForm.get('group').enable();
} else {
  this.myForm.get('group').disable();
  this.myForm.get('group.shiftStatus').enable()
}

What you'd also maybe want is to actually store this form control paths to variables, so that you don't need to call get all the time, but that is just a suggestion :)

answered Jul 18, 2017 at 9:56

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

SBB Over a year ago

Thanks, didn't really think about just re-enabling the single element.. it was late :)

AVJT82 Over a year ago

Sometimes the simplest things are just in front of us and cannot be seen Happens to all of us :D Glad to hear the solution was acceptable for you, I really think this is the best way to handle this.

Collectives™ on Stack Overflow

Angular2 Reactive Forms disable elements in form group

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related