如何在Angular2中的某些div中只读取所有输入?

时间:2016-11-29 10:30:38

标签: angular typescript readonly angular2-forms

我有一个包含许多输入的页面,我想让它成为' readOnly' 我找到了这个解决方案:How to change HTML element readonly and required attribute in Angular2 Typescript?

但我不想单独为每个输入做这件事。

如何将readOnly属性添加到某个div中的所有输入。

7 个答案:

答案 0 :(得分:69)

在输入栏中尝试此操作:

[readonly]="true"

希望,这会奏效。

答案 1 :(得分:17)

如果您想要整个群组,而不是一次只有一个字段,则可以使用HTML5 <fieldset>代码。

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

    <!-- fields go here -->

</fieldset>

答案 2 :(得分:12)

如果使用反应式表单,您还可以使用myFormGroup.disable()禁用FormGroup中的整个表单或任何控件子集。

答案 3 :(得分:4)

所有输入都应该替换为自定义指令,该指令读取单个全局变量以切换只读状态。

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

// component value
childmessage = false;

答案 4 :(得分:3)

如果您要立即禁用Angular形式的所有输入:

1-反应形式:

user

2-模板驱动的表单(NgForm):

然后您应该在NgForm变量(例如,名为myNgForm)中掌握NgForm

user

对于NgForm,请注意在正确的时间调用disable方法

要确定何时调用它,您可以找到更多详细信息in this Stackoverflow answer

答案 5 :(得分:0)

只需将容器div'指针 - 事件'的css属性设置为无,即'pointer-events:none;'

答案 6 :(得分:0)

你可以这样做。 打开一个ts文件广告,在那里创建一个包含所需输入的界面,并在要在导出类写入

下显示的页面中
readonly yourinterface = yourinterface
readonly level: number[] = [];

并在您的模板中执行此操作     * ngFor =“让你的接口类型”