Angular- Disable button till dropdown option is selected


I made a dropdown
enter image description here
As you can see there are empty textareas and no option is selected. I want to disable all the buttons until any option is selected and textareas are full, means making selecting an option mandatory. How do I do it?

This is my code:

  <table class="justify-content-between">
    <tr *ngFor="let entity of rows">
      <td class="col-1" *ngIf="entity.value!=null">
        <mat-select [(ngModel)]="entity.code" (selectionChange)="onChangeValue($event)" required>
          <mat-option *ngFor="let lang of languages" [disabled]="!lang.canEdit" [value]="lang.code" disabled>{{ lang.title }}</mat-option>
      <td class="col-1" *ngIf="entity.value!=null">
        <textarea style="height: 2rem" class="pl-5" >{{ entity.value }}</textarea>
  <div class="d-flex flex-column align-items-center mt-2">
    <button class="form-control" (click)="addNewLanguage()">Add new language</button>
      <div class="d-flex pt-2">
        <button class="form-control">Discard</button>
        <button class="form-control ml-4">Save Changes</button>

The ts file:

dialogData: DialogDataModel;

  languages: any[];

  rows: any[] = [];

  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogDataModel) {
      this.dialogData = data;
      this.rows = this.dialogData.localisedEntities.filter(lang => lang.value);
      this.languages = => ({ code: item.code, title: item.title, canEdit: item.canEdit }))

  ngOnInit(): void {

  addNewLanguage() {
      code: '',
      title: '',
      value: '',
      canEdit: true

  onChangeValue(ev: any){
    this.rows = => {
      if (row.code == ev.value) {
        const lang = this.languages.find(lang => lang.code == ev.value);
        row.title =lang.title;
      return row;

    this.languages = => {
      if (lang.code == ev.value) {
        lang.canEdit = false;
      return lang;



You need to call on changeEvent whenever an option is selected or text field is changed
For option selected


for text area you also need to bind the value to ngModel
like this

            style="height: 2rem"

and the buttons you want to disable you need to add disable property like this

        Add new language

 <button class="form-control ml-4" [disabled]="isDisabled()">
          Save Changes

and in ts file you need to do this

 onChangeValue() {
  isDisabled() {
    return this.rows.filter((item) => item.value == '' || item.code == '')
      .length > 0
      ? true
      : false;

you will see both are calling the same function on event change

here is the stackblitz just for demo cahnge it as your ease

Answered By – Kumail Hussain

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published