Angular2 RC - 故障排除按钮

Posted 2023-03-13

【中文标题】Angular2 RC - 故障排除按钮

【英文标题】：Angular2 RC - troubleshot disabled button

【发布时间】：2016-10-31 22:22:19

【问题描述】：

这是我在这里的第一个问题，所以如果我做错了什么，请告诉我，以便我修复它:)

我遇到了一些问题，无法使 [diabled] 标记在我的表单中的按钮上正常工作。

这是我的模板：

<form #loginForm="ngForm">
      <label class="omwave">Identifiant</label>
      <input type="text" class="omwave" [(ngModel)]="login" placeholder="Identifiant" name="login" required>
      <label class="omwave">Mot de passe</label>
      <div class="input-group omwave">
        <input type="password" class="input-group-field omwave" [(ngModel)]="password" placeholder="Mot de passe" name="password" required>
        <div class="input-group-button">
          <button type="submit" (click)="goLogin()" value="submit" class="" [disabled]="!isValid"><img  src="imgs/start_service.png" ></button>
        </div>
      </div>
    </form>

这里是我的组件：

import Component from '@angular/core';
import FORM_DIRECTIVES, NG_VALIDATORS, Validators, Control from "@angular/common";

@Component(
  selector: 'login',
  templateUrl: 'app/core/templates/login.html',
  directives: [FORM_DIRECTIVES]
)

export class LoginComponent 
  protected login: string;
  protected password: string;

  constructor() 

  

当我的两个输入的登录名和密码为空时，得到了 ng-invalid 属性并且按钮被禁用。 但是，如果我填写输入，他们得到了 ng-valid 属性，但我的按钮仍然被禁用，我不知道为什么，因为在填写输入时表单是有效的。 如果有人有想法请:) 如果您需要任何其他信息，我会尽力回答。

感谢阅读。

问候，

【问题讨论】：

您不能禁用 isValid 上的提交按钮。相反，您可以在 form.dirty 上进行检查...。为什么即使字段中的单个更改也会使表单变脏...但是更改后用户应该了解当前表单的验证

【参考方案1】：

基于 Angular2 的内联表单支持，我将使用以下内容：

<form #loginForm="ngForm">
  <label class="omwave">Identifiant</label>
  <input type="text" class="omwave" [(ngModel)]="login" 
         placeholder="Identifiant" name="login"
         ngControl="name" required> <--------
  <label class="omwave">Mot de passe</label>
  <div class="input-group omwave">
    <input type="password" class="input-group-field omwave" 
         [(ngModel)]="password" placeholder="Mot de passe"
         ngControl="password" name="password" required> <-------
    <div class="input-group-button">
      <button type="submit" (click)="goLogin()" value="submit" 
          class="" [disabled]="!loginForm.valid"> <------
        <img  src="imgs/start_service.png" >
      </button>
    </div>
  </div>
</form>

在您的情况下，我不知道如何处理 isValid 属性以及它对应的内容。您可以直接依赖表单状态 (loginForm) 及其 valid 属性。

【讨论】：

非常感谢蒂埃里！ :) 在我的输入中添加 [ngControl]="login" 和 [ngControl]="password" 并将 [disabled]="!isValid" 切换到 [disabled]="!loginForm.valid" 使其工作得非常好!

【参考方案2】：

我认为这会起作用，

<button type="submit" (click)="goLogin()" value="submit" class="" [disabled]="!loginForm.form.valid"><img  src="imgs/start_service.png" ></button>

【讨论】：

遗憾的是没有 micronyks，我已经尝试过这个因为我在另一篇文章中看到过但不起作用：s