How to disable textarea based on the value selected from dropdown

Question

I want to disable text-area based on the option selected from the dropdown values. In my component.ts file, I have defined a variable to keep a track of if the text area is to be disabled or not

messageDisabled: boolean = false, and there is a function that triggers on change of dropdown value

getdropdownGender(event) {
    const value = event;
    if (value == 'a' || value == 'b')
      this.messageDisabled = true
    else
      this.messageDisabled = false
  }

The part of my component.html file is

<div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>Gender</label><span class="asterick">*</span>
                <select
                  type="text"
                  formControlName="gender"
                  class="form-control border-primary"
                  [(ngModel)]="selected_gender"
                  #t
                  (change)="getdropdownGender(t.value)"
                >
                  <option value="">Select Gender</option>
                  <option
                    value="{{ _position }}"
                    *ngFor="let _position of genderList"
                  >
                    {{ _position }}
                  </option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Message</label>
                <textarea
                  [disabled]="messageDisabled"
                  cols="30"
                  rows="3"
                  type="text"
                  class="form-control border-primary"
                  formControlName="message"
                  placeholder="Message"
                >
                </textarea>
              </div>
            </div>
          </div>

But the [disabled] parameter in the text area is not working (based on the condition of messageDisabled value). Can anyone please help me resolve this issue ?

Have you checked if the `messageDisabled` changes its value as you expect? I can't see the issue in the code that you posted. `[disabled]` looks fine — Adrian Kokot, Sep 14 '21 at 08:53
@Adrian Kokot yes, `messageDisabled` value is changing as expected when the dropdown value changes. But the text area `disabled` functionality is not changing. Based on the code written above, the text area is not getting disabled in any of the drop-down values — ESCoder, Sep 14 '21 at 08:55
@AdrianKokot if I use `attr.disabled` in place of `disabled`, then the text area always remains `disabled` — ESCoder, Sep 14 '21 at 09:00
Have you tried setting to `null` if false? Like [here](https://stackoverflow.com/questions/50130924/angular-disabled-myboolean-not-working)? — Adrian Kokot, Sep 14 '21 at 09:24
Yes, @AdrianKokot its working when setting to null if false. Thanks !! — ESCoder, Sep 14 '21 at 09:33

score 0 · Answer 1 · answered Sep 14 '21 at 09:37

0

I think you could use *ngif

<textarea *ngIf="value == 'a' || value == 'b'" cols="30" rows="3" type="text"
            class="form-control border-primary" formControlName="message" placeholder="Message">
      </textarea>

answered Sep 14 '21 at 09:37

Tontontothor

1
1

score 0 · Answer 2 · answered Sep 14 '21 at 11:32

0

The disabled attribute is a boolean attribute. Since it's not required a value you can do like this:

<textarea {{ messageDisabled ? "disabled" : "" }}></textarea>

or

<textarea {{ messageDisabled ? "disabled='disabled'" : "" }}></textarea>

answered Sep 14 '21 at 11:32

Dananjaya

466
5
9

How to disable textarea based on the value selected from dropdown

2 Answers2