如何禁用提交按钮，直到表单在 angular 12 中有效？

Question

login.component.html

<form (ngSubmit)="submitLogin()" #loginForm="ngForm">

<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="email" name="email" [(ngModel)]="form.email" [ngModelOptions]="{standalone: true}" required>
</div>

<div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" id="password" name="password" [(ngModel)]="form.password" [ngModelOptions]="{standalone: true}" required>
</div>

<button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Submit</button>

</form>

我是 angular 的新手，我试图禁用提交按钮，直到表单输入字段为空，但这里它显示启用，但如果我像 "loginForm.form.valid" 这样编码，则提交按钮在放置后显示禁用! 喜欢 "!loginForm.form.valid" 然后它再次显示启用提交按钮。那么，我该如何解决这个问题？请帮助我。

谢谢

Answer 1

方法一：

尝试 [disabled]="!loginForm.valid" 不要使用表单关键字。

并添加禁用 css，如下所示。

button:disabled{
  cursor:not-allowed;
  opacity:0.5
}

方法二

在组件中使用get方法

get form():FormGroup{
  return this.loginForm
}

在 HTML 中使用 [disabled]="!form.valid"

Answer 2

您可以将它绑定到一个函数以使其自行更新。

模板：

[disabled]="invalidForm()"

TS:

public invalidForm() {
  return !loginForm.form.valid;
}

Answer 3

如果其他答案无效，请尝试此方法。

<button type="submit" class="btn btn-primary" [disabled]="!form.password || !form.email">Submit</button>

Answer 4

尝试-

<button type="submit" class="btn btn-primary [disabled]="loginForm.invalid">Submit</button>

或

<button type="submit" class="btn btn-primary" [disabled]="!loginForm?.valid">Submit</button>

如何禁用提交按钮，直到表单在 angular 12 中有效？

How to disable submit button until form is valid in angular 12?

angular

authentication

angular12