angular - Angular-禁用按钮,直到选择下拉选项
问题描述
我做了一个下拉菜单 如您所见,有空的文本区域并且没有选择任何选项。我想禁用所有按钮,直到选择任何选项并且 textareas 已满,这意味着必须选择一个选项。我该怎么做?
这是我的代码:
<div>
<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>
</mat-select>
</td>
<td class="col-1" *ngIf="entity.value!=null">
<textarea style="height: 2rem" class="pl-5" >{{ entity.value }}</textarea>
</td>
</tr>
</table>
<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>
</div>
</div>
</div>
ts文件:
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 = this.dialogData.localisedEntities.map(item => ({ code: item.code, title: item.title, canEdit: item.canEdit }))
}
ngOnInit(): void {
}
addNewLanguage() {
this.rows.push({
code: '',
title: '',
value: '',
canEdit: true
});
}
onChangeValue(ev: any){
this.rows = this.rows.map(row => {
if (row.code == ev.value) {
const lang = this.languages.find(lang => lang.code == ev.value);
row.title =lang.title;
}
return row;
});
this.languages = this.languages.map(lang => {
if (lang.code == ev.value) {
lang.canEdit = false;
}
return lang;
});
}
解决方案
您需要在changeEvent
选择选项或更改文本字段时为选定选项而更改文本字段
<mat-select
[(ngModel)]="entity.code"
(selectionChange)="onChangeValue($event)"
required
>
对于文本区域,您还需要将值绑定到ngModel
这样
<textarea
[(ngModel)]="entity.value"
(change)="isDisabled()"
style="height: 2rem"
class="pl-5"
></textarea>
并且您要禁用的按钮需要添加这样的禁用属性
<button
class="form-control"
(click)="addNewLanguage()"
[disabled]="isDisabled()"
>
Add new language
</button>
<button class="form-control ml-4" [disabled]="isDisabled()">
Save Changes
</button>
在 ts 文件中你需要这样做
onChangeValue() {
this.isDisabled();
}
isDisabled() {
return this.rows.filter((item) => item.value == '' || item.code == '')
.length > 0
? true
: false;
}
您会看到两者都在事件更改时调用相同的函数
这是 stackblitz 只是为了演示 cahnge 它作为您的轻松https://stackblitz.com/edit/angular-mat-select-example-decme7
推荐阅读
- overlay - 您可以仅以 1 个多边形图层为目标进行多个点图层的空间连接吗?
- javascript - 难以解决 Javascript 中的导入错误
- javascript - 使用 lodash 在数组中查找具有匹配键的对象
- sweetalert2 - 如何更改 Sweetalert 框中的文本位置?
- python - `pip install cudf-cuda100` 导致“错误:找不到与 cudf-cuda100 匹配的分布”
- python - 如何在算术加法期间进位 1
- python - Pandas - ValueError:无法从重复的轴重新索引
- javascript - 为了使用通过 NPM 安装的所有依赖项,创建本地服务器的最佳方法是什么?
- installation - Moodle 数据库连接失败
- python - 使用另一列查找一列中的类别计数