CODEWITHSUNDEEP
angular
RRB
RRB

Reputation: 2116

Form button not being disabled

I have a form button that is not being disabled. I am doing a check to see if password match and meet a minimum length. Here is my code

  <div id="wrapper">
    <section>
      <div class="page-container">
        <p class="profile-details">
          Please enter a username and password to create your profile
        </p>
        <form [formGroup]="profileDetailsForm">
          <div>
            <label for="username">Username</label>
            <input id="username" type="text" formControlName="username" size="50" />
          </div>
          <div>
            <label for="password">Password</label>
            <input id="password" type="password" formControlName="password" />
          </div>
          <div>
            <label for="confirmPassword">Confirm Password</label>
            <input
              type="password"
              id="confirmPassword"
              (ngModelChange)="onCheckPasswordFields()"
              formControlName="confirmPassword"
            />
            <p *ngIf="isConfirmPasswordFails" class="error">
              * Password and Confirm Password do not match, please try again.
            </p>
          </div>
          <button (click)="onCreateProfile()" [disabled]="passwordsMatch == 'false'">CREATE PROFILE</button>
        </form>
      </div>
    </section>
  </div>



  onCheckPasswordFields() {
    const passwordField = this.profileDetailsForm.value.password;
    const confirmPasswordField = this.profileDetailsForm.value.confirmPassword;
    if ((passwordField === confirmPasswordField) && (confirmPasswordField.length > 7)) {
      this.passwordsMatch = true;
    } else {
      this.passwordsMatch = false;
    }
  }

  onCreateProfile() {
    this.profileDetails.username = this.profileDetailsForm.get('username').value;
    this.profileDetails.password = this.profileDetailsForm.get('password').value;
    this.profileDetails.confirmPassword = this.profileDetailsForm.get('confirmPassword').value;
    this.create.emit(this.profileDetails);
    localStorage.setItem('userName', this.profileDetails.username)
  }

I am not sure what I a missing here. I thought it was because passwordsMatch was not instantiated but I am declaring it passwordsMatch: boolean = false;

Please assist.

Upvotes: 1

Views: 43

Answers (3)

Nui San
Nui San

Reputation: 56

'false' is not a Boolean value. If your variable is boolean, it will automatically bind to [disable] that bool value.

Use this:

<button (click)="onCreateProfile()" [disabled]="!passwordsMatch">CREATE PROFILE</button>

Or, if this is a complex condition, you can call to a method like this

<button (click)="onCreateProfile()" [disabled]="!isPasswordsMatch()">CREATE PROFILE</button>

isPasswordsMatch() {
    //More complex code here
    return this.passwordsMatch;
}

Upvotes: 1

arun kumar
arun kumar

Reputation: 1171

disabled attribute accepts a boolean value, I hope it will help you

  <button (click)="onCreateProfile()" [disabled]="passwordsMatch">CREATE PROFILE</button>

Upvotes: 1

Srinivasan Sekar
Srinivasan Sekar

Reputation: 2119

When you use passwordsMatch == 'false' is equivalent to checking false=="false" that's why it is not working. You can make make passwordsMatch==false which will work , but it is not proper way of doing things when you use boolean you dont need to compare them just use passwordsMatch alone. If you want to reverse it, use !passwordsMatch.

<button (click)="onCreateProfile()" [disabled]="passwordsMatch">CREATE PROFILE</button>

For reversing ,

<button (click)="onCreateProfile()" [disabled]="!passwordsMatch">CREATE PROFILE</button>

Upvotes: 1

Related Questions