如何以角度禁用模板驱动表单中的所有字段

Question

我在 Angular 5 中创建了一个模板驱动的表单

我想首先禁用整个表单，并且还希望在单击某个按钮后启用表单，因此我在表单标记中添加了一个禁用属性并将其值设置为 false 如下所示，（这没有'虽然不行）：

<form #formName = "ngForm" [disabled]="true">
</form>

由于上述 disabled 属性不起作用，我将 disabled 属性更改为

[attr.disabled] = true

这也没用

现在我有了表单元素的引用 #formName，我在 TS 文件中使用它并尝试更改引用对象内的 disabled 属性值

这是我所做的：

@ViewChild('formName') formName;


this.formName.disabled = true; 

这也不起作用，我收到一条错误消息，说禁用无法更改，因为它只是一个吸气剂

我应该如何在模板驱动的表单上默认禁用整个表单？

提前致谢:)

Answer 1

正如评论中提到的，您可以将表单包装在 fieldset 标记内，并按如下方式实现：

<form>
    <fieldset [disabled]="fieldsetDisabled">
        <!-- YOUR FIELDS HERE -->
    </fieldset>
</form>

您可以通过切换局部变量和disabled/enabled 状态来更改控制器中的处理状态：

this.fieldsetDisabled = true;  // Disables the fieldset
this.fieldsetDisabled = false; // Enables the fieldset