[解決済み] Reactiveなフォーム - disabled属性
2022-05-01 03:32:19
質問
を使おうとしています。
disabled
属性から
formControl
. それをテンプレートに入れると、動作します。
<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>
でも、ブラウザが警告してくれるんです。
<ブロッククオートdisabled属性をreactiveフォームで使用しているようです。 ディレクティブを使用します。disabled を true に設定すると コンポーネントクラスでこのコントロールを設定すると、 disabled 属性が実際に DOM に設定されます。 となります。changed after checked "エラーを回避するために、この方法を使用することをお勧めします。
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
そこで、それを
FormControl
, そしてテンプレートから削除しました。
constructor(private itemsService: ItemsService) {
this._items = [];
this.myForm = new FormGroup({
id: new FormControl({value: '', disabled: true}, Validators.required),
title: new FormControl(),
description: new FormControl()
});
this.id = this.myForm.controls['id'];
this.title = this.myForm.controls['title'];
this.description = this.myForm.controls['description'];
this.id.patchValue(this._items.length);
}
しかし、これはうまくいきません(これは
input
). 何が問題なのでしょうか?
解決方法は?
私はこれまで
[attr.disabled]
なぜなら、私はプログラムによるenable()/disable()よりも、このテンプレートによる駆動の方が、IMOとして優れていると思うからです。
変更
<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>
になります。
<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>
新しいマテリアルチェンジの場合
md-input
を
mat-input
.
関連
-
[解決済み] CLIを使ったAngular 2 - 制作のためのビルド
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] 最後のページに戻るには
-
[解決済み] NgModuleにおける宣言、プロバイダ、インポートの違いは何ですか?
-
[解決済み】コンポーネントのプロパティが現在の日付時間に依存している場合、Angular2の「expression has changed after it was checked」例外を管理する方法
-
[解決済み】Angular 2 - innerHTML スタイリング
-
[解決済み] 設定ファイルにng serveのデフォルトのホストとポートを設定する。
-
[解決済み] Angularアプリケーションが本番モードと開発モードのどちらで動作しているかを確認する方法
-
[解決済み] prodのバンドルサイズを小さくするには?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Angularフレームワーク入門
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み】エラー NG6002: AppModule の NgModule.imports に表示されるが、NgModule クラスに解決できなかった。
-
[解決済み] Angular2の括弧、括弧、アスタリスクの違いは何ですか?
-
[解決済み] NgModule.schemasにCUSTOM_ELEMENTS_SCHEMAを追加してもエラーが表示される。
-
[解決済み] AngularのINPUT要素でngModel内のパイプを使用する
-
[解決済み] Angular 2の無効化されたコントロールがform.valueに含まれない
-
[解決済み] 複数のng-content
-
[解決済み] VSCodeでAngularをデバッグする方法とは?
-
[解決済み] Angular 2のテンプレートでlet-*とは何ですか?