web-dev-qa-db-ja.com

Angular2のあるdivのすべての入力を読み取り専用にする方法は？

多くの入力があるページがあり、それを 'readOnly'にしたいのですが、この解決策が見つかります： Angular2 TypescriptでHTML要素の読み取り専用と必須属性を変更するには

ただし、すべての入力に対して個別に行うのは望ましくありません。

readOnlyプロパティをあるdivのすべての入力に追加するにはどうすればよいですか。

angulartypescriptreadonlyangular2-forms
37
Max K

入力フィールドでこれを試してください：

[readonly]="true"

これがうまくいくことを願っています。

75
Avnesh Shakya

一度に1つのフィールドだけでなく、グループ全体を実行する場合は、HTML5 <fieldset>タグを使用できます。

<fieldset [disabled]="killfields ? 'disabled' : null">

    <!-- fields go here -->

</fieldset>
19
user5868538

リアクティブフォームを使用する場合は、myFormGroup.disable()を使用して、フォーム全体またはFormGroupのコントロールのサブセットを無効にすることもできます。

12
snort

Angularフォーム内のすべての入力を一度に無効にする場合：

1-リアクティブフォーム：

myFormGroup.disable() // where myFormGroup is a FormGroup

2-テンプレート駆動型フォーム（NgForm）：

NgForm変数でNgFormを取得する必要があります（たとえば、myNgFormという名前の場合）。

myNgForm.form.disable() // where form here is an attribute of NgForm 
                      // & of type FormGroup so it accepts the disable() function

NgFormの場合、適切なタイミングでdisableメソッドを呼び出すように注意してください

いつ呼び出すかを決定するために、あなたはより多くの詳細を見つけることができます このStackoverflowの答えで

5
Ahmed Elkoussy

すべての入力は、単一のグローバル変数を読み取って読み取り専用ステータスを切り替えるカスタムディレクティブに置き換える必要があります。

// template
<your-input [readonly]="!childmessage"></your-input>

// component value
childmessage = false;
4
Leo Lanese

コンテナdiv 'pointer-events'のcssプロパティをnoneに設定するだけです（つまり、 'pointer-events：none;'）。

0
Ravinder Kumar