CODEWITHSUNDEEP
angularvalidationangular-template-form
Tom N
Tom N

Reputation: 1

Dropdown menu in template-driven form doesn't validate required property on submit

I have a template-driven form in my Angular application that includes a dropdown menu (select element). I want to validate the dropdown menu to ensure that a value is selected before the form is submitted. The only validation I need to apply is the required property.

However, even when I select a value from the dropdown menu, the form still shows the error message "State is required" and applies the 'is-invalid' class to the dropdown menu.

Here is the relevant code snippet from my view:

<div class="form-group">
    <label for="inputState" class="form-label fw-bold">State <span class="required">*</span></label>
    <div id="inputState" class="select-box">

        <!-- select input start -->
        <select class="form-control" name="state" #state="ngModel" [(ngModel)]="form.shippingAddress.state" [ngClass]="{'is-invalid': f.submitted && state.errors}" required>
            <option value="none">---Select---</option>
            <option *ngFor="let state of states" [value]="state.id">{{ state.name }}</option>
        </select>
        <!-- select input end -->

        <!-- validation start -->
        <div
            *ngIf="f.submitted && state.errors"
             class="invalid-feedback"
        >
             <div *ngIf="state.errors['required']">
                   State is required
             </div>
        </div>
        <!-- validation end -->

    </div>
</div>

.ts file

export class theDemoComponent implements OnInit {
    form = {
        shippingAddress: {
            state: "none",
        },
    };

    states: object[] = [
        { id: 1, name: "DC" },
        { id: 2, name: "VA" },
        { id: 3, name: "MD" },
        { id: 4, name: "WA" },
    ];

    ngOnInit(): void {}

    onSubmit(): void {
        console.log(JSON.stringify(this.form, null, 2));
    }
}

What am I missing in my code? How can I make the required validation work for the dropdown menu in my template-driven form? Any help would be greatly appreciated.

I have attempted to validate the template-driven form select, dropdown menu by including the required attribute on the element. I have also included the following attributes and directives in my element: name="state": This assigns the name "state" to the select element, which can be used for form submission and validation purposes. #state="ngModel": This creates a reference variable named "state" and links it to the Angular ngModel directive. This allows me to access the state's validation status and errors. [(ngModel)]="form.shippingAddress.state": This two-way data binding binds the selected value of the dropdown menu to the form.shippingAddress.state property in my component. [ngClass]="{'is-invalid': f.submitted && state.errors}": This applies the CSS class "is-invalid" to the dropdown menu if the form has been submitted (f.submitted) and there are validation errors (state.errors).

Upvotes: 0

Views: 296

Answers (1)

Krishna Rathore
Krishna Rathore

Reputation: 9687

Try With this.

<form name="form" #forms="ngForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="inputState" class="form-label fw-bold">State <span class="required">*</span></label>
        <div id="inputState" class="select-box">

            <!-- select input start -->
            <select class="form-control" name="state" #state="ngModel" [(ngModel)]="form.shippingAddress.state"
                [ngClass]="{'is-invalid': forms.submitted && state.errors}" required>
                <option value="none">---Select---</option>
                <option *ngFor="let state of states" [value]="state.id">{{ state.name }}</option>
            </select>
            <!-- select input end -->

            <div *ngIf="forms.submitted && state.invalid" class="custom-select-invalid-feedback">
                <div *ngIf="country?.errors?.required">
                    State is required</div>
            </div>

        </div>
    </div>
</form>

Upvotes: 0

Related Questions