Angular [disabled]="MyBoolean" 不工作答案

【问题标题】：Angular [disabled]="MyBoolean" not workingAngular [disabled]="MyBoolean" 不工作
【发布时间】：2018-10-12 08:15:20
【问题描述】：

我有一些输入（复选框），如果我的布尔值为真，我希望它们被禁用。但它不起作用......有趣的是提交按钮工作正常，那是相同的方法......

我的组件.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>

myComponent.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;
          }

【问题讨论】：

标签： angular property-binding

【解决方案1】：

请注意，如果您使用 Angular Material 按钮，正确的方法是：

<button mat-button [disabled]="condition">Button</button>

因为库定义了一个输入属性，例如@Input('disabled')，所以可以工作。

【讨论】：

【解决方案2】：

在我的例子中，我错误地使用了 FormControl，当我删除它时，我期望它的控件名称类似于 [formControl]="CtrlName"，现在禁用它可以正常工作。

这是对我有用的禁用标签

[disabled]="isDisabledVariable"

【讨论】：

【解决方案3】：

如果您使用引导程序并使用类应用任何背景颜色，只需将其删除。它会起作用的。

        &lt;button type="submit" class='**bg-primary** text-left form-control w-auto text-white mt-4' [disabled]="manageUsers.invalid"&gt;Submit&lt;/button&gt;

请删除类字段中的“bg-primary”。然后它会工作。

【讨论】：

【解决方案4】：

反应形式：

.html 文件：

<textarea class="form-control" rows="4" formControlName="message" [readonly]="disableMessage"></textarea>

.ts 文件：

disableMessage = true;

【讨论】：

你能在你的答案中使用标记让它更漂亮吗？

【解决方案5】：

改用[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>来启用按钮。

来自https://angular.io/guide/template-syntax

【讨论】：

我已经尝试过了，但它不起作用..如果我使用 attr.disabled 一切都被禁用，如果我使用 disbaled 一切都被启用
对于输入，无论值如何， disabled 属性的存在都会禁用输入
啊，谢谢它的工作！并感谢 fpr 的解释
我发现有这个声明“freitag?true:null”对于它开始工作很重要。我相信它所做的是检查属性“freitag”。如果为真，则将禁用的值设置为真。如果为假，则将其设置为空。据我了解， null 只是完全删除了该属性。
[attr.readonly]="true or false" 结果相同（只读）但 [attr.readonly]="freitag? true : null"

【解决方案6】：

试试这个，相信我它的工作..

<input [disabled]="isLoading ? true : null" />

使用null 而不是false

【讨论】：

在 Angular 9 上不适合我，设置为 null 仍然会禁用输入
恐怕它不适用于 Angular 11
Type 'null' is not assignable to type 'string | boolean'
@CodeFinity 只需将 null 更改为 false 即可修复错误 <input [disabled]="isLoading ? true : false" />

【解决方案7】：

对我来说，以上都不起作用，包括以下

[disabled]="!enableDelete">

对我有用的是

[disabled]="enableSave == 'false'">

【讨论】：

听起来你的 enableSave 是字符串 'false' 而不是布尔值 false。
比 [disabled]="!!enableSave"> 可能会强制将其转换为布尔值

【解决方案8】：

响应式表单不支持原生“禁用”属性。如果您希望他们按照您想要的方式工作，请尝试探索：https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

另请参阅 Angular 响应式表单文档以在表单控制中执行类似操作。

例如：new FormControl({value:'tom', disabled: true})

【讨论】：

当我使用它们时，它们似乎工作正常。例如 [disabled]="some.form.status == 'INVALID'" 效果很好。