My very first Angular 5 project.
I've gone through resources like: https://angular.io/guide/form-validation and various search results I looked up, only to realize that they are all outdated.
In my form, I have several input fields such as:
<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 that is at least 4 characters long.</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 that is at least 4 characters long</mat-error>
</mat-form-field>
</form>
Now, I want to manage the disabled state of my button and only enable it when all the mandatory fields are filled out, like so:
<button mat-raised-button [disabled]="!pizzaPlaceForm.valid" (click)="onCreateClick()" *ngIf="createMode">Create</button>
However, it seems that $invalid does not work anymore. How can I achieve this in Angular 5?