CODEWITHSUNDEEP
angulartypescript
Ananya Amar
Ananya Amar

Reputation: 89

binding [disabled] to a property

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 :

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 || '',
    });
  }

Upvotes: 1

Views: 2354

Answers (3)

Amer
Amer

Reputation: 6706

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
}

Upvotes: 1

vsnikhilvs
vsnikhilvs

Reputation: 576

You might want to try using a variable for letting the app know that the button is clicked. eg: submitted.

By default Get Started button is disabled -> submitted=false

If user input a valid email on type Get Started button will enable -> check if the form field is valid using formControls

If user click Get Started button , after clicking it will disable -> submitted=true

Button will only enable again after click if user change the input on the email field with a valid one -> repeast the second one, after you submit, do reset the form for this functionality.

Upvotes: 1

harleybl
harleybl

Reputation: 949

You can always include more functionality by binding [disabled] to a property or a function. Just be aware that you don't want to put time-consuming logic into the disabled check since angular will run it very often. Here is an example of what I am describing.

HTML:

                        <button [disabled]="isDisabled" mat-flat-button color="primary"
                             class="v-btn-sml" id="get-started-button">
                            Get Started
                        </button>
                    </div>
                  </form>

Typescript

get isDisabled(): boolean {
     if (!this.modelForm.valid) {
         return true;
     }
     const vals = this.modelForm.value;
     return this.model.emailAddress == vals['emailAddress'];
     
  }

Upvotes: 1

Related Questions