angular - Angular [disabled]="MyBoolean" 不工作
问题描述
我有一些输入(复选框),如果我的布尔值为真,我希望它们被禁用。但它不起作用......有趣的是提交按钮工作得很好,那是相同的方法......
我的组件.html
<form [formGroup]="BetreuungsoptionForm" (ngSubmit)="onSubmit()">
<label *ngIf="!eingetragen" for="art">Art</label>
<select *ngIf="!eingetragen" formControlName="art" id="art" class="form-control" [(ngModel)]="Art" required >
<option value="festeAnmeldung">feste Anmeldung</option>
<option value="flexibleAnmeldung">flexible Anmeldung</option>
</select>
<label for="datum">Beginn Datum</label>
<input formControlName="datum" type="date" id="datum" class="form-control" required>
<label *ngIf="(Art == 'festeAnmeldung')" for="montag">Montag</label>
<input *ngIf="(Art == 'festeAnmeldung')" formControlName="montag" [disabled]="montag" type="checkbox" id="montag" class="form-control wochentag">
<label *ngIf="(Art == 'festeAnmeldung')" for="dienstag">Dienstag</label>
<input *ngIf="(Art == 'festeAnmeldung')" formControlName="dienstag" [disabled]="dienstag" type="checkbox" id="dienstag" class="form-control wochentag">
<label *ngIf="(Art == 'festeAnmeldung')" for="mittwoch">Mittwoch</label>
<input *ngIf="(Art == 'festeAnmeldung')" formControlName="mittwoch" [disabled]="mittwoch" type="checkbox" id="mittwoch" class="form-control wochentag">
<label *ngIf="(Art == 'festeAnmeldung')" for="donnerstag">Donnerstag</label>
<input *ngIf="(Art == 'festeAnmeldung')" formControlName="donnerstag" [disabled]="donnerstag" type="checkbox" id="donnerstag" class="form-control wochentag">
<label *ngIf="(Art == 'festeAnmeldung')" for="freitag">Freitag</label>
<input *ngIf="(Art == 'festeAnmeldung' )" formControlName="freitag" [disabled]="freitag" type="checkbox" id="freitag" class="form-control wochentag">
<button type="submit" [disabled]="!BetreuungsoptionForm.valid" class ="btn btn-primary">Speichern</button>
<button type="button" (click)="OnBetreuungsoptionInfos()" class ="btn btn-success">weitere Informationen</button>
<button type="button" *ngIf="!gekuendigt" (click)="OnBetreuungsoptionLoeschen()" class ="btn btn-danger">Kündigen</button>
</form>
我的组件.ts
this.BetreuungsoptionForm = new FormGroup
({
art: new FormControl(),
datum: new FormControl(this.BetreuungsoptionenKindRef[d].Beginn.toString().substring(0,10)),
montag: new FormControl(this.BetreuungsoptionenKindRef[d].Montag),
dienstag: new FormControl(this.BetreuungsoptionenKindRef[d].Dienstag),
mittwoch: new FormControl(this.BetreuungsoptionenKindRef[d].Mittwoch),
donnerstag: new FormControl(this.BetreuungsoptionenKindRef[d].Donnerstag),
freitag: new FormControl(this.BetreuungsoptionenKindRef[d].Freitag)
})
if(this.BetreuungsoptionenKindRef.Montag)
{
this.montag = true;
}
if(this.BetreuungsoptionenKindRef.Dienstag)
{
this.dienstag = true;
}
if(this.BetreuungsoptionenKindRef.Mittwoch)
{
this.mittwoch = true;
}
if(this.BetreuungsoptionenKindRef.Donnerstag)
{
this.donnerstag = true;
}
if(this.BetreuungsoptionenKindRef.Freitag)
{
this.freitag = true;
}
解决方案
尝试[attr.disabled]="freitag? true : null"
或[attr.readonly]="freitag"
代替。
您可以以[class.btn-lg]="someValue"
类似的方式使用属性。
您的文本框因此而起作用:
disabled 属性是另一个特殊的例子。默认情况下,按钮的 disabled 属性为 false,因此该按钮处于启用状态。当您添加 disabled 属性时,它的存在单独将按钮的 disabled 属性初始化为 true,因此按钮被禁用。
添加和删除 disabled 属性会禁用和启用按钮。该属性的值无关紧要,这就是为什么您不能通过编写来启用按钮的原因
<button disabled="false">Still Disabled</button>
。
推荐阅读
- malloc - 如何告诉 LLVM 从多大的堆开始?
- vuejs2 - BootstrapVue b-col 格式在子组件中不起作用
- excel - .NumberFormat 不适用于使用 SUMIFS 的单元格
- node.js - 连接丢失后 Socket.io 不会重新连接 - React Native + Nodejs
- python - Python,“[i]”附近的Sqlite:语法错误错误
- javascript - 这个 JavaScript 表达式是什么意思?
- reactjs - 使用 ReactJS 和 useEffect 单击时无法暂停间隔
- twilio - Twilio 在使用循环重复语音通话时有暂停期
- postgresql - 设置 Kubernetes 集群并运行数据库
- javascript - 我们不能在 React.js 的数组中迭代 material-ui 吗?