CODEWITHSUNDEEP
htmlangular
Bike_dotnet
Bike_dotnet

Reputation: 254

Form still submits with required on Select

I am currently busy with an angular app and I have a form that has a few dropdowns. Even though they are set to required with the first option empty the form still submits.

Any ideas?

        </mat-card-header>
        <mat-card-content fxLayout="column" fxLayoutAlign="center">
            <mat-form-field>
                <mat-select placeholder="Vehicle Type" [(ngModel)]="VehicleAdd.Vehicle_Type" name="Type" required>
                    <option value="" disabled selected>Choose</option>
                    <mat-option *ngFor="let type of types" [value]="type">
                        {{type}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </mat-card-content>
    </mat-card>

Upvotes: 0

Views: 35

Answers (1)

Simone Rossaini
Simone Rossaini

Reputation: 8162

I think the problem is disabled, disabled element will just be “passed over” when form validity is checked. Try :

 </mat-card-header>
    <mat-card-content fxLayout="column" fxLayoutAlign="center">
        <mat-form-field>
            <mat-select placeholder="Vehicle Type" [(ngModel)]="VehicleAdd.Vehicle_Type" name="Type" required>
                <option value="" selected>Choose</option>
                <mat-option *ngFor="let type of types" [value]="type">
                    {{type}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </mat-card-content>
</mat-card>

Upvotes: 1

Related Questions