Question

我无法弄清楚为什么会这样。

我有一个这样的表格..

<form class="invite-users__form" #addUserForm="ngForm">
      <div class="form-group">
          <label class="form-label" for="firstName">First Name</label>
          <input type="text" class="form-control" id="firstName" max-length="15" [(ngModel)]="firstName" name="firstName" required>
      </div>
      <div class="form-group">
          <label class="form-label" for="lastName">Last Name</label>
          <input type="text" class="form-control" id="lastName" max-length="15" name="lastName" [(ngModel)]="lastName" required>
      </div>
      <div class="form-group">
          <label class="form-label" for="email">Email</label>
          <input type="text" class="form-control" id="email" name="email" [(ngModel)]="email" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"
              required>
      </div>
      <p class="form-label">Select Role</p>
      <ul class="role-select__selection">
          <li class="role-select__role" (click)="roleSelect('role1')">role1</li>
          <li class="role-select__role" (click)="roleSelect('role2')">role2</li>
      </ul>
      <p class="form-label m--margin-top-10">Allow admin permissions</p>
      <div class="admin-permission__container">
          <button (click)="permissionSelect(true)" class="admin-permission__button button-true">YES</button>
          <button (click)="permissionSelect(false)" class="admin-permission__button button-false">NO</button>
      </div>
  </form>

和一个控制表单的按钮。

<div class="m-login__form-action">
<button 
   [disabled]="!addUserForm.form.valid" 
   [ngClass]="{'invalid': (!addUserForm.form.valid)}" 
   (click)="addUser()" 
   class="account-step__button">
          <span class="register__button__text">SEND INVITE</span>
</button>
  </div>

现在我要做的是保持表单禁用，直到用户选择了一个角色，并选择他们是否是管理员，所以我已经这样做了......

<button 
   [disabled]="!addUserForm.form.valid && userRole === undefined && allowAdmin === undefined" 
   [ngClass]="{'invalid': (!addUserForm.form.valid && userRole === undefined && allowAdmin === undefined)}" 
   (click)="addUser()" 
   class="account-step__button">
          <span class="register__button__text">SEND INVITE</span>
</button>
  </div>

在我的组件中，我已经设置了

userRole;
allowAdmin;

所以它们是未定义的，现在发生了什么是来自有效但是userRole和allowAdmin都是未定义但是无效的类被删除而按钮是不可用的？

我无法弄清问题是什么？

已禁用的表单代码无效Angular 5

0 个答案: