如何在 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;

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

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

提前致谢:)

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

Answer 2

最好的解决方案是这样，因为 [formGroup] 应该留在表单标签中：

<form [formGroup]="form" *ngIf="form">   
 <fieldset [disabled]="!fieldsetDisabled">

<!--YOUR FORM FIELDS-->    
 
 </fieldset> 
</form>

How to disable all the fields in a template driven form in angular