Angular [禁用]="MyBoolean" 不工作

Question

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

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

Answer 1

试试 [attr.disabled]="freitag? true : null" 或 [attr.readonly]="freitag"。

您可以以类似的方式使用 [class.btn-lg]="someValue" 等属性。

您的文本框之所以有效，是因为：

The disabled attribute is another peculiar example. A button's disabled property is false by default so the button is enabled. When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled.

Adding and removing the disabled attribute disables and enables the button. The value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>.

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

Answer 2

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

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

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

Answer 3

对我来说 none 以上的工作，包括下面的

[disabled]="!enableDelete">

对我有用的是

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

Answer 4

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

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

使用null代替false

Answer 5

反应形式：

.html 文件:

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

.ts 文件：

disableMessage = true;

Answer 6

如果您使用 bootstrap 并使用 class 应用任何背景颜色，只需将其删除即可。它会起作用。

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

请删除 class 字段中的“bg-primary”。然后它会起作用。

Answer 7

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

这是对我有用的禁用标签

[disabled]="isDisabledVariable"

Answer 8

注意：如果您使用的是 Angular Material 按钮，一个很好的例子是：

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

这是可行的，因为库定义了一个输入属性用于传递“禁用”值，即 @Input('disabled').

Angular [禁用]="MyBoolean" 不工作

Angular [disabled]="MyBoolean" not working

angular

property-binding