如何根据从下拉菜单中选择的值禁用文本区域

Question

我想根据从下拉值中选择的选项禁用文本区域。在我的component.ts文件中，我定义了一个变量来跟踪是否要禁用文本区域

messageDisabled: boolean = false，并且有一个触发下拉值变化的函数

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

我的component.html文件的部分是

<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>

但文本区域的[disabled]参数不工作(基于messageDisabled值的条件)。有谁能帮我解决这个问题吗?

Answer 1

我觉得你可以用*ngif

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

Answer 2

禁用属性为布尔属性。因为它不需要一个值，你可以这样做:

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

或

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