web-dev-qa-db-ja.com

Angular [disabled] = "MyBoolean"が機能しない

入力（チェックボックス）がいくつかあり、ブール値が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;
      }
angularproperty-binding
6
Kai

代わりに[attr.disabled]=freitag? true : null"または[attr.readonly]="freitag"を試してください[class.btn-lg]="someValue"などの属性を同様の方法で使用できます。

あなたのテキストボックスはこのために機能します：

Disabled属性は、別の独特な例です。ボタンの無効プロパティはデフォルトでfalseであるため、ボタンは有効になっています。 disabled属性を追加すると、その存在だけでボタンのdisabledプロパティがtrueに初期化され、ボタンが無効になります。

Disabled属性を追加および削除すると、ボタンが無効になり、有効になります。属性の値は無関係です。そのため、<button disabled="false">Still Disabled</button>と書いてボタンを有効にすることはできません。

from https://angular.io/guide/template-syntax

7
reckface

リアクティブフォームは、ネイティブの「無効」属性をサポートしていません。希望どおりに動作させたい場合は、これを試してみてください： https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b4211 =

Angularリアクティブフォームドキュメントを参照して、フォームコントロールでこのようなことを行ってください。

例：new FormControl（{value： 'tom'、disabled：true}）

5
Chakri

これを試して、動作していると信じてください。

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

nullの代わりにfalseを使用します

0
Syamsoul Azrien

私にとっては、上記のいずれも機能しませんでした。

[disabled]="!enableDelete">

私のために働いたのは

[disabled]="enableSave == 'false'">
0
James Poulose