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..>?
Add a comment
|
3 Answers
If You use ReactiveForms just write
form: formGroup;
this.form.disable();
In case of ngForm you can write like this' created 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()
}
1 Comment
Deniss M.
I use template driven forms in this case.
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();
}
Comments
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>
