如何禁用提交按钮，直到表格在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.form.form.form.valid”编码，然后提交按钮显示put ！喜欢“！loginform.form.valid”然后再次显示启用提交按钮。那么，如何解决此问题？请帮我。

谢谢

Answer 1

方法1：

尝试 [disabled] =“！

并添加如下所示的禁用CS。

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

方法2

在html使用中使用get方法

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

[disabled] =“！form.valid”

Answer 2

如果其他答案不起作用，请尝试一下。

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

Answer 3

您可以将其绑定到函数以使其自身更新。

模板：

[disabled]="invalidForm()"

TS：

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

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>