angular - 如何以 Angular 禁用模板驱动表单中的所有字段

Question

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

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

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

由于上面的disabled属性不起作用，我把disabled属性改成了

[attr.disabled] = true

这也行不通

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

这是我所做的:

@ViewChild('formName') formName;


this.formName.disabled = true; 

这也没有用，我收到一条错误消息，说禁用不能更改，因为它只是一个 setter/getter

在模板驱动的表单中，我应该如何在默认情况下以 Angular 禁用整个表单？

提前致谢:)

Answer 1

如评论中所述，您可以将表单包装在 fieldset 标记中并按如下方式实现:

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

并且您可以通过在禁用/启用状态之间切换局部变量来更改 Controller 中的处理状态:

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