2

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.

2
  • Use a FormGroup when grouping various FormControls. I honestly think the FormGroup is kind of funky though. I don't prefer it if I can avoid it, however it is nice for keeping data togethr Commented Nov 19, 2019 at 22:36
  • Thanks! @ChadK I'm looking into FormGroups now and definitely seeing there's some funk to be found. Keep your fingers crossed for me. Commented Nov 20, 2019 at 17:26

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.