2016-11-29 5 views
15

私は多くの入力とページを持っている、と私はそれを作りたい「readOnly」 私はこの解決策を見つける:How to change HTML element readonly and required attribute in Angular2 Typescript?Angular2でdivのすべての入力を読み取り専用にするにはどうすればよいですか?

をしかし、私は別に、すべての入力のためにそれを行うにはしたくありません。

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

+0

動的フォームでこれを実行しようとしていますか? – Sriram

+0

あなたが達成しようとしたこと、試したこと、失敗した場所を示すコードを追加してください。 –

答えて

33

は、入力フィールドでこれを試してみてください:

[readonly]="true" 

希望、これは動作します。

+3

FWIWこれはタイプの入力には何もしません。チェックボックス。それには '[disabled]'を使わなければなりません。 – im1dermike

-1

コンテナdivの 'pointer-events'のcssプロパティをnoneに設定するだけです( 'pointer-events:none;')。

+0

これは機能しません。タブキーを使用してフィールドにアクセスすることはできます。 –

+0

これは、タブの選択を禁止するために、tabindex = " - 1"属性を要素に設定します。 –

+0

@KaranvirKang tabindex = -1はアクセス不能になりません –

12

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

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

    <!-- fields go here --> 

</fieldset> 
8

反応性のフォームを使用している場合、あなたはまた、フォーム全体またはmyFormGroup.disable()とFormGroupのコントロールの任意のサブセットを無効にすることができます。

+2

これを行うと、送信コードがFormGroupの値を取得できなくなります。 –

1

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

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

// component value 
childmessage = false; 
+1

答えに説明を追加してください。プロの視点からは、すべての入力を1つのグローバル変数を読み取って読み取り専用ステータスを切り替えるカスタムディレクティブに置き換える必要があることを推測できます。しかし、間違っている可能性があり、確かに読者の大部分にとって明らかではありません。 –

0

このようにすることができます。そこ オープンTSファイルの広告は、あなたが欲しいの入力とのインタフェースを作成し、ページに、あなたはエクスポートクラスの書き込み

readonly yourinterface = yourinterface 
readonly level: number[] = []; 

と、テンプレート内の下に表示するこの * ngFor =「yourinterfaceの聞かせてyourtype」好きです

関連する問題