Angular - How to disable an input field if an option on a select field is selected?

Question

I have a form where the user can choose an option from a select input. I want to enable or disable the next input option upon certain condition. If the selected option on the select input has a value of 1, the next field must be disabled and it's value needs to be null.

<div class="form-floating mb-7" style="display: flex;">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example" #type >
      <option value="1" >Market</option>
      <option value="2" >Category</option>
    </select>
    <label for="floatingSelect">Type</label>
</div>

<div class="form-floating mb-7" style="display: flex;">
    <input type="text" class="form-control" id="floatingInputValue" [value]="type.value == '2' ? item.externalplatform_category : null" #externalCat [disabled]="type.value == '1' ? true : false"/>
    <label for="floatingInputValue">Category</label>
</div>

Here it is the component file:

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { AppService } from '../../../../app.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-reglas',
  templateUrl: './reglas.component.html',
  styleUrls: ['./reglas.component.scss']
})
export class ReglasComponent implements OnInit {
  public id: any;

  public currentUrl = window.location.href;

  public productRules: any[] = [];

  constructor(private appService: AppService, private ref: ChangeDetectorRef, private route: ActivatedRoute) { }
  
  getProductRules() {
    this.id = this.route.snapshot.paramMap.get('id');

    this.appService.getProductRules(this.id).toPromise()
      .then(res => {
        this.productRules = res
        this.ref.detectChanges()
      })
      .catch(err => {
        console.log(err)
      })
  }
  
  updateProductRule(name: string, externalCat: string, order: number, type: number, id: number) {
    this.appService.updateProductRule(name, externalCat, order, type, id).toPromise()
    .then(res => {
      this.ngOnInit();
    })
    .catch(err => {
      console.log(err)
    })
  }

  toInt(param: string) {
    return parseInt(param)
  }

  deleteProductRule(id: number) {
    this.appService.deleteProductRule(id).toPromise()
    .then(res => {
      this.ngOnInit();
    })
    .catch(err => {
      console.log(err)
    })
  }

  ngOnInit(): void {
    this.getProductRules()
  }

}

Is there any way to make this change dynamically with some native angular function? Or should I do it with DOM manipulation?

Hello, please post your component .ts file

Chaka15
– Chaka15

2022-03-24 07:59:17 +00:00
Commented Mar 24, 2022 at 7:59 — Chaka15
– Chaka15, Commented Mar 24, 2022 at 7:59

Joosep Parts · Accepted Answer · 2022-03-24 08:07:22Z

1

Use [disabled] attribute on option when condition is true.

<mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="1">Option 1</mat-option>
    <mat-option value="selected == '1' ? null : 2" [disabled]="selected == '1'">Option 2</mat-option>
    <mat-option value="selected == '1' ? null : 3" [disabled]="selected == '1'">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

Working example: https://stackblitz.com/edit/angular-qzxndg-wncisa?file=src%2Fapp%2Fselect-value-binding-example.html

answered Mar 24, 2022 at 8:07

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

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

3 Comments

An3SC Over a year ago

Hi, Joosep, thank you for your answer! The problem is that I need to disable an input outside the select field, so the "selected" doesn't exist when I try to use it on the sibling input!

Joosep Parts Over a year ago

This wasn't mentioned before. Use @Input() or @Output() for data communication if it's going outside of the component scope? Otherwise please post reproduction of the problem on StackBlitz.

An3SC Over a year ago

Hi again, Joosep, I came to understand what you were telling me. I'm trying to work with this declaring the selected variable as "public selected: any". Now I just have to get it to work, because it seems to not update it's value.

An3SC · Accepted Answer · 2022-03-24 10:35:17Z

I solved the situation like this on the html side:

<div class="form-floating mb-7" style="display: flex;">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example" #type (change)="observeSelect()" >
      <option value="1" >Market</option>
      <option value="2" >Category</option>
    </select>
    <label for="floatingSelect">Type</label>
</div>

<div class="form-floating mb-7" style="display: flex;">
    <input type="text" class="form-control" id="floatingInputValue" [value]="type.value == '2' ? item.externalplatform_category : null" #externalCat [disabled]="type.value == '1' ? true : false"/>
    <label for="floatingInputValue">Category</label>
</div>

And in the component I created the function:

observeSelect():void {}

Simplest solution I could come with. Do I know exactly why it works? No. Does it work? Yes.

Thank you all for your help!

Collectives™ on Stack Overflow

Angular - How to disable an input field if an option on a select field is selected?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related