Javascript 如何在所有表单字段通过后启用按钮

我的第一个Angular 5应用程序

我已经通读了：我在谷歌上搜索了好几页来找到答案，结果发现它们都已经过时了

我的表单上有多个输入框，如：

<form name="pizzaPlaceForm" class="form-container">
  <mat-form-field>
    <input matInput placeholder="Shop Name" [(ngModel)]="pizzaPlace.shopName"
           id="shopName" name="shopName" #shopName="ngModel"
           required minlength="4">
    <mat-error>You must provide a shop name at least 4 characters in length.</mat-error>
  </mat-form-field>
  <br/>
  <mat-form-field>
    <input matInput placeholder="Contact Name" [(ngModel)]="pizzaPlace.contactName"
           id="contactName" name="contactName" #contactName="ngModel"
           required minlength="4">
    <mat-error>You must provide a contact name at least 4 characters in length.</mat-error>
  </mat-form-field>
</form>

您必须提供长度至少为4个字符的店铺名称。


您必须提供至少4个字符长的联系人姓名。

现在，我想控制按钮的禁用状态，并仅在输入所有必需字段后启用它，如：

<button mat-raised-button disabled="pizzaPlaceForm.$invalid" (click)="onCreateClick()" *ngIf="createMode">Create</button>

创建

---

只是$invalid似乎不再有效，那么如何使用Angular 5执行此操作？

如果表单无效，您希望禁用该按钮。所以你可以在下面试试

---

Create

使用

ngForm

为表单添加标识符。然后可以禁用“提交”按钮 具有[禁用]属性

[disabled]=“pizzaPlace.form.invalid”

或

[disabled]=“pizzaPlace.invalid”

创造

服务的美元符号是一种

angularjs

自负。在``angular`中，它只是

无效的

。您可以简单地使用

pizzaPlaceForm。无效的

而不是

！pizzaPlaceForm.有效

<form  #pizzaPlace="ngForm"  name="pizzaPlaceForm" class="form-container">



<button mat-raised-button [disabled]="pizzaPlace.form.invalid" (click)="onCreateClick()" *ngIf="createMode">Create</button>

</form>