Question

是否可以在角度中禁用整个表单（组）而不是分别为每个输入执行此操作？

类似<input [disabled]="formNotValid"/>但适用于<form>或<div ngModelGroup..>？

Answer 1

如果使用ReactiveForms，只需编写

即可

form: formGroup;

this.form.disable();

如果是ngForm，你可以这样写，＆＃39;创建了plunker

 <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
  <input name="first" ngModel required #first="ngModel">
  <input name="last" ngModel>
  <button>Submit</button>
</form>

<button (click)="disable(f)">Disable form</button>



 disable(f) {
    f.form.disable()
  }

Answer 2

这是一个解决方案，可在点击提交按钮时自动停用所有表单元素。

此解决方案适用于模板驱动的表单。

<强> HTML：

<form #myForm="ngForm" (ngSubmit)="onFormSubmit( myForm )">

    <input type="text" name="title" [(ngModel)]="model.title" #title="ngModel">

    <button type="submit">

        <span *ngIf="!imyForm.disabled">
            Submit Form
        <span>

        <span *ngIf="myForm.disabled">
            Submitted
        <span>

    </button>

</form>

<强> TS：

public onFormSubmit( form: any): void {
    form.form.disable();
}

Answer 3

可以认为它是hack-y，但是您可以使用ngClass和css来应用一个类，该类在满足条件时关闭容器内所有输入的指针事件。

.disable-inputs {
  pointer-events: none;
}

<form [ngClass]="{'disable-inputs':[true/false condition]}">
   // input elements
</form>

Angular（4）：分别禁用整个表单（组）而不是每个输入？

3 个答案: