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

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  style="display: flex;">
    <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  style="display: flex;">
    <input type="text"  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?

CodePudding user response：

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/app/select-value-binding-example.html

CodePudding user response：

I solved the situation like this on the html side:

<div  style="display: flex;">
    <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  style="display: flex;">
    <input type="text"  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!