Question

我有一个未被禁用的表单按钮。我正在检查密码是否匹配并达到最小长度。这是我的代码

  <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)
  }

我不确定我在这里缺少什么。我以为是因为没有实例化passwordsMatch，但我还是声明了passwordsMatch: boolean = false;

请协助。

Answer 1

disabled属性接受布尔值，希望对您有所帮助

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

Answer 2

使用passwordsMatch == 'false'等效于检查false=="false"，这就是它不起作用的原因。您可以使make passwordsMatch==false起作用，但是当使用布尔值时，这不是正确的处理方式，您不必仅使用passwordsMatch就可以比较它们。如果要反转，请使用!passwordsMatch。

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

要倒车，

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

Answer 3

'false'不是布尔值。如果您的变量是布尔值，它将自动绑定到[禁用]该布尔值。

使用此：

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

或者，如果这是一个复杂的情况，则可以调用这样的方法

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

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

表单按钮未禁用

3 个答案: