web-dev-qa-db-ja.com

条件付きで入力フィールドをAngular 2または4で読み取り専用にする：アドバイス+最適/どの方法で行うか

私は 誰か他の人の質問 に答えようとしました。そして、そうすることで、いくつかのことについて私の心にはかなりの不確実性があることに気づきました。番号付きのポイント1..4について誰かがフィードバックを提供できることを期待しています。

タスク：条件付きで入力フィールドを読み取り専用にします

HTMLの関連セクション：

<input type="text" placeholder="Club Name" #clubName>

これをTypeScriptコンポーネントに追加します。

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

これは私にとって灰色の領域だと言わざるを得ません。

  1. Angular 2+の@ViewChildでHTMLInputElementまたはElementを直接参照するのは悪い習慣ですか？のみ、私はよくElementRefを使用する例や、nativeElementからElementRefにチェーンする例を見てきました。

VS Studioにはそれらに対するIntelliセンスがないため、突然暗闇でコーディングしているように感じます。つまり、メソッドsetAttributeまたはremoveAttribute、それらのパラメーター要件などに関するフィードバックを受け取ることはありません（キャストするAsも知っています）

  1. 次に、ドキュメントを見た後、HTMLテンプレートの入力でこれを直接行うことができると思います：
<input [attr.readonly]= "isReadOnly">

IIRC TypeScriptで取得するプロパティを使用して、この方法で行う必要があると思います。

get isReadOnly() :boolean {
}

この方法は有効ですか？

  1. HTMLテンプレートでもメソッド構文を実行できますか？
<input [attr.readonly]= "isReadOnly()">

TypeScript

isReadOnly() :boolean {
}

この方法は有効ですか？

4.要約すると、最良のアプローチは何ですか？

更新：* ngIFもあるので、同じ名前の2つの入力要素の1つを出力します。しかし、それは私にナットを割る大ハンマーのように聞こえます。

angularreadonlyattrhtml-input
24
JGFMK

以下を使用する必要があります（Angular 4）：

<input [readonly]="isReadOnly">

att.readonlyを使用すると、値がfalseであってもreadonly属性が存在するため、入力は常に読み取り専用になります。 [readonly] Angularを使用すると、isReadOnlyがtrueの場合にのみ属性が配置されます。

HTMLでは、入力を読み取り専用にするには以下で十分です。

<input readonly>
53
phn

<input readonly="{{ variable }}>"を使用できます。

*。component.tsで、変数を初期化します。

private variable: boolean = true;
1
Rodrigo Pauletti