时间戳

首页 > 解决方案 > 禁用的表单标签不起作用Angular 5

javascript - 禁用的表单标签不起作用Angular 5

问题描述

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

我有这样的表格..

<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;

所以它们是未定义的，现在发生的情况是 from 有效但userRoleandallowAdmin都未定义但无效类被删除并且按钮未被禁用？

我无法弄清楚问题是什么？

标签： javascriptangulartypescript

解决方案

推荐阅读