所有表单字段通过后如何启用按钮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了所有表单字段通过后如何启用按钮相关的知识，希望对你有一定的参考价值。
我的第一个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？
答案
如果表单无效，您要禁用该按钮。所以你可以尝试下面
<button mat-raised-button [disabled]="!pizzaPlaceForm.valid" (click)="onCreateClick()" *ngIf="createMode">Create</button>另一答案
使用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>
以上是关于所有表单字段通过后如何启用按钮的主要内容，如果未能解决你的问题，请参考以下文章