binding [disabled] to a property

Issue

Right now the disabling button when email is in correct format is already working fine based on my code below.

Scenario I want to implement :

• By default Get Started button is disabled
• If user input a valid email on type Get Started button will enable.
• If user click Get Started button , after clicking it will disable
• Button will only enable again after click if user change the input on the email field with a valid one.
• then it will be e cycle

How do we address that in Angular ? is there a cleaner way or technique to do that ?

Input box example

html code

 <div fxLayout="column">
                            <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                                <mat-label>Email</mat-label>
                                <input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress" />
                                    <mat-error *ngIf="modelForm.get('emailAddress').hasError('email')">
                                        Email is in invalid format.
                                    </mat-error>
                                    <mat-error *ngIf="modelForm.get('emailAddress').hasError('required')">
                                        Email is required.
                                    </mat-error>
                            </mat-form-field>
                        </div>
                        <form (click)="getStarted()">
                        <div style="text-align:right;margin-top: 19.0px;">
                            <button [disabled]="modelForm?.get('emailAddress').invalid" mat-flat-button color="primary"
                                 class="v-btn-sml" id="get-started-button">
                                Get Started
                            </button>
                        </div>
                      </form>

ts code

ngOnInit(): void {
    this.initFormGroup();
  }



    
  initFormGroup() {
    this.modelForm = this.formBuilder.group({
      id: [this.model.id || 0],
      emailAddress:[this.model.emailAddress,[Validators.required, Validators.email]],
      firstName: [this.model.firstName,Validators.required],
      roleId: this.model.roleId,
      lastName: [this.model.lastName,Validators.required],
      phoneNumber: this.model.phoneNumber,
      companyName: [this.model.companyName,Validators.required],
      ssocredentials: this.model.ssocredentials || '',
      accountId: this.accountId,
      title: this.model.title,
      isSso: this.model.isSso || '',
    });
  }

Solution

You can achieve that by binding the disabled property to two indicators, if any of them are true, then the button will be disabled:

1. If the email form-control is invalid, i.e. modelForm?.get('emailAddress').invalid
2. An isDisabled variable (should be true by default to disable), and will be changed on two events:

• set to false once the email field has been changed (ngModelChange)="isDisalbed = false"
• set to true once the button has been clicked (i.e. within the getStarted method).

You can try something like the following:

<form [formGroup]="modelForm">
    <div fxLayout="column">
        <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px">
            <mat-label>Email</mat-label>
            <input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress"
                (ngModelChange)="isDisalbed = false" />
            <mat-error *ngIf="modelForm.get('emailAddress').hasError('email')">
                Email is in invalid format.
            </mat-error>
            <mat-error *ngIf="modelForm.get('emailAddress').hasError('required')">
                Email is required.
            </mat-error>
        </mat-form-field>
    </div>
    <div style="text-align: right; margin-top: 19px">
        <button [disabled]="modelForm?.get('emailAddress').invalid || isDisabled" mat-flat-button color="primary"
            class="v-btn-sml" id="get-started-button" (click)="getStarted()">
            Get Started
        </button>
    </div>
</form>

And within your component class:

isDisabled = true;

getStarted() {
  this.isDisabled = true;
  // your logic here
}

Answered By - Amer