角[disabled] =“ MyBoolean”不起作用

Question

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

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

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

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

使用null代替false

Answer 2

尝试[attr.disabled]=freitag? true : null"或[attr.readonly]="freitag"替代使用[class.btn-lg]="someValue"类似的方法，您可以使用属性。

由于以下原因，您的文本框可以正常工作：

禁用属性是另一个特殊的示例。默认情况下，按钮的disabled属性为false，因此启用了按钮。当您添加Disabled属性时，仅它的存在会将该按钮的Disabled属性初始化为true，因此该按钮将被禁用。

添加和删​​除禁用的属性将禁用并启用该按钮。该属性的值无关紧要，这就是为什么您不能通过写入启用按钮的原因<button disabled="false">Still Disabled</button>。

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

Answer 3

反应性表单不支持本机的“禁用”属性。如果您希望他们按照自己的方式工作，请尝试探索以下内容：https : //netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

另请参阅Angular反应性表单doc在表单控件中执行类似的操作。

例如：new FormControl（{value：'tom'，disable：true}）