Sunday, 7 July 2019

Required field validation for kendo-dropdownlist in angular 7 application

I am trying to implement required field validation for kendo-dropdownlist on my template driven form in angular 7. If you can see I am looping and generating a dynamic table which has kendo dropdownlist in every row. I need to highlight the dropdown if it is not selected. I tried to enclose my divs withing a form tag thinking I could handle it when the user presses submit but I think this is more of setting within kendo. Could somebody tell me the way to do it. Whatever examples I am seeing so far all jquery based.

Html

form name="form" (ngSubmit)="f.form.valid && createDocument()" #f="ngForm" novalidate>
<div class="center" class="file-upload-wrapper">
    <ngx-file-drop dropZoneLabel="Drop files here" dropZoneClassName="file-drop" multiple="true"
        (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
        <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
            <button type="button" (click)="openFileSelector()">Drop Files to Upload</button>
        </ng-template>
    </ngx-file-drop>

    <div class="upload-table">
        <table id="table1" class="center">

            <tbody class="upload-name-style">
                <tr *ngFor="let item of files; let i=index">
                    <td> <input kendoTextBox [(ngModel)]="item.relativePath" style="width: 350px" /></td>
                    <td>
                        <kendo-dropdownlist style="width:350px" [(ngModel)]="item.selectedDocumentItem" 
                            [data]="DocumentTypes" [defaultItem]="defaultItem" [filterable]="false" textField="Name"
                            valueField="Id">
                        </kendo-dropdownlist>
                    </td>
                    <td>
                        <kendo-datepicker style="width: 200px" [format]="'dd MMM, yyyy'"
                            [(ngModel)]="item.selectedDate"></kendo-datepicker>
                    </td>
                    <td> <button class="btn btn-default" (click)="deleteRow(i)"><i class="fa fa-trash"></i>Delete
                        </button></td>
                </tr>
            </tbody>
        </table>


    </div>
    <div class="wrapper">
        <button *ngIf="files.length > 0" type="submit" class="btn btn-primary btn-upload">upload</button>
    </div>
</div>


</form>

Component

 public createDocument() {
        this.files.forEach(element => {

            this.uploadDocument = <IDocument>{

                id: 5508,
                documentTypeId: element.selectedDocumentItem.Id ,
                name: element.relativePath,
                documentDate: element.selectedDate

              };


        });
        }



from Required field validation for kendo-dropdownlist in angular 7 application

No comments:

Post a Comment