Angular disable dropdown menu in Reactive Form until value in another dropdown menu has been set

Question

I want a dropdown menu "subcategories" to be disabled with a grey background (and no possibility to open the dropdown menu with the defined placeholder) until the user has selected a value from the dropdownmenu "categories". I'm working with reactive forms. My lists "categories" and "subcategories" are hardcoded in the component class and I have a list selectedSubcategories declared on top to retain the list of subcategories based on the chosen category.

In the template-driven approach, I managed to disable this dropdown by using the [disabled] attribute.

My html for the dropdown menu "categories":

<select class="form-control" (change)="selectChangeCategory($event)">
          <option disabled selected>Select...</option>
          <option *ngFor="let category of categories">
            {{category.name}}
          </option>
        </select>

The selectChangeCategory method who keeps track of the value chosen in the dropdown menu "categories":

selectChangeCategory(event: any){
    this.selectedCategory = event.target.value;
    this.selectedSubcategories = this.selectSubcategory(this.selectedCategory);
  }

The selectSubcategory method who returns the right list of subcategories:

selectSubcategory(selectedCategory: string){
  if(selectedCategory == "Category 1"){
    this.selectedSubcategories = this.subcategoriesCategory1;
  }
  else if(selectedCategory == "Category 2"){
    this.selectedSubcategories = this.subcategoriesCategory2;
  }
  else{
    this.selectedSubcategories = [{name: 'empty!'}];
  }
  return this.selectedSubcategories;
  }

My html for the dropdown menu "subcategories":

<select class="form-control" (change)="selectSubcategory(selectedCategory)" value="subcategory.name" [disabled]="selectedCategory===''">
          <option disabled selected >Select...</option>
          <option *ngFor="let subcategory of selectedSubcategories">
            {{subcategory.name}}
          </option>
        </select>

The [disabled]="selectedCategory===''" works perfectly in the template-driven approach. The dropdown menu "subcategories" has a nice grey background and is disabled until the user selects a category. In the reactive form approach, this code fails. I manage to display only subcategories when a category has been chosen, but you can still open the dropdown menu of "subcategories" and see the "Select..." label.

Edit: this is my code in the ngOnchanges() method:

ngOnChanges(){
    this.selectedSubcategories = this.selectSubcategory(this.selectedCategory);
  }

I really appreciate any help here.

Mehdi Shakeri · Accepted Answer · 2021-04-08 16:28:49Z

1

in reactive form you should disable controls in one of these forms

FormControl({value: '', disabled: true})

or reactivly

control.disable() 
control.enable()

because in template driven form you actually set disable attribute on control. or if you want a simpler solution you can create a custom directive like this

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

This directive does exactly disable attribute in context of reactive form

answered Apr 8, 2021 at 16:28

Mehdi Shakeri

6224 silver badges11 bronze badges

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

1 Comment

Amaryllis Over a year ago

I want to try your first approach. Can you explain where I can put the control.disable() (so without the separate directive)? How can I add the condition that the control can be enabled only when a category has been chosen?

Guruprasad mishra · Accepted Answer · 2021-04-11 14:48:14Z

0

I think the issue is with reactive form implementation. Check below example, this should resolve your issue. You can use [disabled]="!categoryForm.controls['category'].value" condition directly on formControlName so that if something is selected subcategories will be enabled then only. Also try to avoid assignment in ngOnChanges as it will get called a lot of times. Try assigning after initialization of service or after ngAfterViewInit hook.

      constructor( private formBuilder: FormBuilder){} //take an instance of FormBuilder
                
                this.categoryForm= this.formBuilder.group({
                  'category': [''], //if you want to initialize any selected value you can pass it directly here
                  'subCategory': ['']
            }); // initialize a form group
                 
             selectChangeCategory(event: any){
              this.selectedCategory = this.categoryForm.controls['category'].value;
              this.selectedSubcategories = this.selectSubcategory(this.selectedCategory);
             }
            selectSubcategory(selectedCategory: string){
              if(selectedCategory == "Category 1"){
              this.selectedSubcategories = this.subcategoriesCategory1;
            }
           else if(selectedCategory == "Category 2"){
            this.selectedSubcategories = this.subcategoriesCategory2;
           }
           else{
            this.selectedSubcategories = [{name: 'empty!'}];
           }
          return this.selectedSubcategories;
         }
//html file
    <form  [formGroup]="categoryForm" >
               <select class="form-control" formControlName="category" (change)="selectChangeCategory($event)">
                      <option value="" disabled selected>Select...</option>
                      <option *ngFor="let cat of categories" [value]="cat.name">
                        {{cat.name}}
                      </option>
                    </select>
            <select class="form-control" formControlName="subCategory"(change)="selectSubcategory(selectedCategory)[disabled]="!categoryForm.controls['category'].value">
                      <option value="" disabled selected >Select...</option>
                      <option *ngFor="let scat of selectedSubcategories" [value]="scat.name">
                        {{scat.name}}
                      </option>
                    </select>
                </form>

Let me know if you still face any challenge. Thank You.

Other ways : Instead of adding disabled condition in html this.categoryForm= this.formBuilder.group({ 'category': [''], //if you want to initialize any selected value you can pass it directly here 'subCategory': [{value: '', disabled: !this.selectedCategory}] }); // initialize a form group

edited Apr 11, 2021 at 14:48

answered Apr 8, 2021 at 16:49

Guruprasad mishra

6446 silver badges17 bronze badges

5 Comments

Amaryllis Over a year ago

I tried your code and now my dropdown for category is empty. I removed the html and the dropdown for category is filled again. The dropdown for subcategory isn't disabled. I can open it and see the Select... option, but there are no values in it.

Guruprasad mishra Over a year ago

please check the updated answer..maybe formControlName and *ngFor let var name was same that is why the dropdown was not loading , also in disable condition formGroup is categoryForm. Try again with this.

Amaryllis Over a year ago

I think changing the names in the ngFor to avoid confusion with the formControlName is a good suggestion. The values appear again. I like your creative way of thinking about a solution for disabling the dropdown. Unfortunately, it's still not working... The dropdown is disabled, but stays disabled even when I select a category.

Guruprasad mishra Over a year ago

did u add the disable condition to formGroup or html ?

Amaryllis Over a year ago

I've added the disable condition to the FormControl and added this.form.controls['subcategory'].enable() to the selectChangeCategory method. That works! Thanks for your input.

Suraj Rao · Accepted Answer · 2023-02-20 05:15:02Z

0

this.form.controls['formControlName'].enable()

or

this.form.controls['formControlName'].disable()

works

edited Feb 20, 2023 at 5:15

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Feb 20, 2023 at 5:13

user5768863

11 bronze badge

Collectives™ on Stack Overflow

Angular disable dropdown menu in Reactive Form until value in another dropdown menu has been set

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related