Angular (4): disable the whole form (group) instead of each input separately?

user_3693726 0
Viewed 10141

Is it possible to disable the whole form (group) in angular instead of doing it for every input separately?

Something like <input [disabled]="formNotValid"/> but for a <form> or a <div ngModelGroup..>?

angular
3 Answers

Here is a solution that automatically disables all form-elements when the submit-button is clicked.

This solution applies to template-driven forms.

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();
}
user_7950160

It could be considered hack-y, but you could use ngClass and css to apply a class that turns off pointer events for all inputs inside a container when conditions are met. 

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

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