Angular [disabled] ="MyBoolean"不工作 [英] Angular [disabled]="MyBoolean" not working

问题描述

我有一些输入(复选框)，如果我的布尔值为true，我希望禁用它们. 但是它不起作用.有趣的是，提交按钮可以正常工作，而且方法也相同.

I have some inputs (Checkboxes) and I want them to be disabled if my Booleans are true. But its not working... The funny thing is the submit button works just fine and thats the same method...

myComponent.html

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

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

推荐答案

请改用[attr.disabled]=freitag? true : null"或[attr.readonly]="freitag".

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

You are able to use attributes like [class.btn-lg]="someValue" in a similar way.

您的文本框可以正常运行，因为:

Your textbox works because of this:

disabled属性是另一个特殊的示例.一个按钮的 默认情况下，disabled属性为false，因此启用了按钮.什么时候 您添加了disable属性，它的存在会单独初始化 按钮的disable属性设置为true，因此该按钮被禁用了.

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.

添加和删除禁用的属性会禁用并启用 按钮.该属性的值无关紧要，这就是为什么您 无法通过编写<button disabled="false">Still Disabled</button>来启用按钮.

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

这篇关于Angular [disabled] ="MyBoolean"不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！