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

Question

我的第一个Angular 5应用程序。

我读完了：https://angular.io/guide/form-validation和几个页面，我用Google搜索找到答案，却发现它们都已经过时了。

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

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

现在我想控制按钮的禁用状态，只有在输入所有必填字段后才能启用它，例如：

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

只有它看起来$ invalid无效，所以我如何使用Angular 5？

Answer 1

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

<button mat-raised-button [disabled]="!pizzaPlaceForm.valid" (click)="onCreateClick()" *ngIf="createMode">Create</button>

Answer 2

使用ngForm为表单添加标识符。然后，您可以使用[disabled]属性禁用提交按钮。

[disabled]="pizzaPlace.form.invalid"或[disabled]="pizzaPlace.invalid"

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



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

</form>