[解決済み] Angular [disabled]="MyBoolean "が動作しない。
2022-03-13 01:33:28
質問
いくつかの入力(チェックボックス)があり、ブール値が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;
}
解決方法は?
試す
[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>
.
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み】Angular 2 - innerHTML スタイリング
-
[解決済み] Angular 5 - クリップボードにコピーする
-
[解決済み] ナンバーパイプ - Angular 2のパラメータは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CLIを使ったAngular 2 - 制作のためのビルド
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angular 2の "select "で新しい選択範囲を取得するにはどうすればよいですか?
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み] テンプレート駆動型とリアクティブ型の実用的な違いとは?
-
[解決済み] AngularのINPUT要素でngModel内のパイプを使用する
-
[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?
-
[解決済み] ページを離れる前に、未保存の変更点を警告する
-
[解決済み] VSCodeでAngularをデバッグする方法とは?