Template based form validation not working

[Legion Rempel]

I can't get form validation to work. form.valid always returns true.

<form #form="ngForm" (ngSubmit)="onSubmit()" style="width: 550px">

  <div class="one-col-popup-grid">

    <label class="col-1-label" for="FiscalPeriodId">Fiscal Period:</label>

    <div class="col-1-control">

      <ejs-dropdownlist id='FiscalPeriodId'

                        name="FiscalPeriodId"

                        [dataSource]='vm().FiscalPeriodList'

                        [(ngModel)]="deferral.FiscalPeriodId"

                        [fields]='{text: "Text", value: "Id"}'

                        [placeholder]="'Select Fiscal Period...'"

                        [popupHeight]="'250px'"

                        [required]="true"></ejs-dropdownlist>

      <span *ngIf="checkRequiredControl('FiscalPeriodId')" class="error">

        *

      </span>

    </div>

</div>

</form>

I've also tried 'required' on it's own instead of [required]="true" but it also doesn't work.

In onSubmit, form is always valid.

  onSubmit() {

    console.log('IS FORM VALID: ', this.form.valid);

  }

How can I get form validation working W

[YuvanShankar Arunagiri]

We have validated your reported query regarding the DropdownList with form validation. Based on the code snippet you shared, we have prepared a simple form using the Syncfusion DropdownList component. However, the form validation works correctly with the Dropdownlist component. The form’s validity is accurately reflected through the form controller, and the form.valid property returns the expected result in our end.

Please refer to the code snippet and the sample link below for your reference and further implementation guidance.

 

Demo link: https://ej2.syncfusion.com/angular/demos/#/tailwind3/drop-down-list/template-driven

<form #form="ngForm" (ngSubmit)="onSubmit()">

                <div class="form-group">

                    <ejs-dropdownlist id="skillname" name="skillname" required #book='ngModel' [(ngModel)]= 'autoskillname' [dataSource]='autoSkillsetData' [placeholder]='autoDrivenPlaceholder' floatLabelType='Auto' [showClearButton]="true">

                        </ejs-dropdownlist>

                        <div *ngIf="!form.valid" class="alert alert-danger">

                            Book Name is required.

                        </div>

                </div>

                <div class="form-group" style="padding:10px;">

                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6" style="display: flex;">

                        <button ejs-button>Submit</button>

                    </div>

                </div>

                </form>

 

 

Sample link: https://stackblitz.com/edit/angular-wsxn1tt3?file=src%2Fapp.component.html

 

Output screenshot:

 

Kindly refer to the below sample and demo link, and if you are still facing the issue, share the issue replicating the sample or replicate the issue in our shared sample with a video demonstration for better understanding. Please let us know if you need any further assistance on this.