How to disable all field in a div/form in Angular 16?

Question

I have tried to disable all html elements in a form in Angular 16. But it is not working as expected. But in the Google Login Form all fields including <a> tag are in disabled state.

This my login.component.html

<div class="signin-wrapper">
  <mat-card>
    <form [formGroup]="loginForm" (ngSubmit)="onFormSubmit()">
      <mat-card-header>
        <mat-card-title>Sign in</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-form-field appearance="outline">
          <mat-label>Email</mat-label>
          <input required matInput type="email" placeholder="eg. test@email.com" formControlName="userEmailAddress">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Password</mat-label>
          <input required matInput type="password" placeholder="eg. ************" formControlName="userPassword">
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" type="submit">Sign in</button>
      </mat-card-actions>
      <mat-card-footer>
        <div class="text-center">Not Registered? <a routerLink="../register">Register</a></div>
      </mat-card-footer>
    </form>
    <mat-progress-bar *ngIf="inProgress" mode="indeterminate"></mat-progress-bar>
  </mat-card>
</div>

I am using

this.loginForm.disable()

to disable the form. The result is

In the above form <a> tag and <button> are not disabled.

Then I tried with <fieldset [disabled]="true">

<div class="signin-wrapper">
  <mat-card>
    <form [formGroup]="loginForm" (ngSubmit)="onFormSubmit()">
      <fieldset [disabled]="true">
      <mat-card-header>
        <mat-card-title>SIgn in</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-form-field appearance="outline">
          <mat-label>Email</mat-label>
          <input required matInput type="email" placeholder="eg. test@email.com" formControlName="userEmailAddress">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Password</mat-label>
          <input required matInput type="password" placeholder="eg. ************" formControlName="userPassword">
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" type="submit">Sign in</button>
      </mat-card-actions>
      <mat-card-footer>
        <div class="text-center">Not Registered? <a routerLink="../register">Register</a></div>
      </mat-card-footer>
      </fieldset>
    </form>
    <mat-progress-bar *ngIf="inProgress" mode="indeterminate"></mat-progress-bar>
  </mat-card>
</div>

The result is

Still <a> tag is in enabled condition.

Is it possible to do like Google?

https://medium.com/@rubenvermeulen/angular-disable-a-form-while-preserving-state-of-controls-4212d8faad0e — Amit Kumar Singh, Aug 18 '23 at 08:41
Does this answer your question? [Disable the entire form at once (Angular reactive form)](https://stackoverflow.com/questions/45854017/disable-the-entire-form-at-once-angular-reactive-form) — Amit Kumar Singh, Aug 18 '23 at 08:41
https://stackoverflow.com/questions/45854017/disable-the-entire-form-at-once-angular-reactive-form — Amit Kumar Singh, Aug 18 '23 at 08:41

score 1 · Answer 1 · answered Aug 18 '23 at 13:05

I have implemented a logic for this. But I don't know is it the best method.

login.component.css

.wrapper-disable{
  z-index: -1 !important;
  position: relative;
  opacity: 0.5;
  pointer-events:none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.wrapper-disable *{
  pointer-events:none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

login.component.html

<div [ngClass]="{'signin-wrapper':true, 'wrapper-disable' : wrapperDisable}">
  <mat-card >
    <form [formGroup]="loginForm" (ngSubmit)="onFormSubmit()">
      <mat-card-header>
        <mat-card-title>SIgn in</mat-card-title>
      </mat-card-header>
      <!-- <mat-divider></mat-divider> -->
      <mat-card-content>
        <mat-form-field appearance="outline">
          <mat-label>Email</mat-label>
          <input required matInput type="email" placeholder="eg. test@email.com" formControlName="userEmailAddress">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Password</mat-label>
          <input required matInput type="password" placeholder="eg. ************" formControlName="userPassword">
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" type="submit">Sign in</button>
      </mat-card-actions>
      <mat-card-footer>
        <div class="text-center">Not Registered? <a routerLink="../register">Register</a></div>
      </mat-card-footer>
    </form>
    <mat-progress-bar *ngIf="inProgress" mode="indeterminate"></mat-progress-bar>
  </mat-card>
</div>

login.component.ts

onFormSubmit(): void {

    if (this.loginForm.valid) {

      this.wrapperDisable = true;
      // 
}

output is:

It is working as expected!!!

score 0 · Answer 2 · answered Aug 18 '23 at 08:32

0

Have you tried [disabled]=true on the <form></form> element?

answered Aug 18 '23 at 08:32

Ghassen Jemaî

111
9

1

Failed to compile. Can't bind to 'disabled' since it isn't a known property of 'form'. – Pamba Aug 18 '23 at 08:38
https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110 – Amit Kumar Singh Aug 18 '23 at 08:40

How to disable all field in a div/form in Angular 16?

2 Answers2