I'm working on a form in Angular4 with some pretty basic validation, just a few fields which I want to ensure are filled in before the user can hit "submit." Using the "required" attribute along with Angular Material ensures that my fields will appear with an asterisk and turn red if the user touches them without entering any values.
The issue I'm running into is the form is submittable even if not all fields are filled in. Certain fields will still have the ng-invalid attribute, yet the form tag shows the ng-valid attribute. Other fields do work as intended, and the form is not valid until they're filled in properly.
Here's my form's tag:
<form class="create-form" autocomplete="new-password" (ngSubmit)="save(campaignForm)" #campaignForm="ngForm">
And here's an example of a form field which does have proper handling; if I leave one like this empty, the form will retain the ng-invalid attribute:
<md-select placeholder="Bill Client for any Expenses?" [(ngModel)]="campaign.billBackRequired" name="bill" class="col-sm-4" required>
<md-option value="Yes">Yes</md-option>
<md-option value="No">No</md-option>
</md-select>
And here's an example of a form field which doesn't affect whether or not the form is valid. As far as I can tell, the unifying trait for all the form fields which do not affect whether the parent form is valid are all text inputs with autofilled options from a list we obtain on the back end of the project:
<md-form-field>
<input autocomplete="new-password" type="text" placeholder="Account Manager" aria-label="Account Manager"
mdInput [formControl]="accountManagersControl" [mdAutocomplete]="am"
[(ngModel)]="campaign.accountManager" name="accountManager" required>
<md-autocomplete #am="mdAutocomplete" [displayWith]="displayName">
<md-option *ngFor="let accountManager of filteredAccountManagers | async" [value]="accountManager">
{{ accountManager['fullname'] }}
</md-option>
</md-autocomplete>
</md-form-field>
edit: After doing some work with the form and building a new field from the ground up, it looks like the [formControl] tag is what causes the wayward fields to not get validated with the rest. I'm currently figuring out how to group various formControls.