[英]Required field validation for kendo-dropdownlist in angular 7 application
我正在嘗試在我的模板驅動表單中以angular 7形式對kendo-dropdownlist進行必需的字段驗證。如果您看到我正在循環並生成一個動態表,該表在每行中都有kendo dropdownlist。 如果未選中下拉菜單,則需要突出顯示。 我試圖用div標簽將div括起來,以為當用戶按下Submit時可以處理它,但是我認為這更多是在kendo中進行設置。 有人可以告訴我這樣做的方法。 到目前為止,無論我看到的任何示例都是基於jquery的。
這是stackblitz https://stackblitz.com/edit/angular-4v2k8f
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>
零件
public createDocument() {
this.files.forEach(element => {
this.uploadDocument = <IDocument>{
id: 5508,
documentTypeId: element.selectedDocumentItem.Id ,
name: element.relativePath,
documentDate: element.selectedDate
};
});
}
您唯一需要的是使用引用變量,查看其是否有效。 我在stackblitz中舉了一個簡單的例子。 因為您只想知道是否具有有效,所以可以使用簡單必需的。 我的堆積如山
更新 :以表格形式,禁用按鈕提交
@Component({
selector: 'my-app',
template: `
<div class="example-wrapper">
<form #myForm="ngForm">
<div *ngFor="let item of files; let i=index">
<p>T-shirt size:</p>
<kendo-dropdownlist name="select{{i}}" #name="ngModel" [(ngModel)]="value[i]" [data]="listItems" required>
</kendo-dropdownlist>
<span *ngIf="name.invalid">*</span>
</div>
<button [disabled]="myForm.invalid">submit</button>
</form>
</div>
`
})
export class AppComponent {
public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
value=[]
files=[{value:''},{value:''},{value:''}]
}
簡要說明(但您有docs )當我們有[[ngModel)]時,我們可以使用模板引用來引用輸入。 如果我們將模板引用與ngModel #name="ngModel"
,則可以在.html中使用template變量和ngModel的所有屬性(invalid,touched ...),方法為name.invalid
, name.touched
...
啊!,不用擔心您會放置“相同”參考變量,如果模型的變量不相等,Angular就會知道它們是不同的變量。
注意:就個人而言,我建議您使用ReactiveForms和FormArray,但這只是一個意見。
確實是Update 2問題是您無法循環訪問要修改的同一列表。 您有*ngFor="let item of files"
並且您正在更改files
。 訣竅是遍歷' '.repeat(files.length).split('')
-或在代碼中創建一個數組this.iterator=new Array(this.files.length)
,然后可以執行<tr *ngFor="let t of iterator;let i=index">
[[ngModel)]在文件[i] .selectedDocumentItem.Id上
參見stackblitz和代碼
<div class="example-wrapper">
<form #myForm="ngForm">
<!-- other way is <tr *ngFor="let t of iterator;let i=index"> -->
<tr *ngFor="let t of ' '.repeat(files.length).split(''); let i=index">
<td>
<kendo-dropdownlist name="select{{i}}" #name="ngModel" [(ngModel)]="files[i].selectedDocumentItem.Id" [defaultItem]="files[i].selectedDocumentItem.id"
[data]="DocumentTypes" [valuePrimitive]="true" textField="Name" valueField="Id" required>
</kendo-dropdownlist>
<span *ngIf="name.invalid">*</span>
</td>
</tr>
<button [disabled]="myForm.invalid">submit</button>
</form>
</div>
如果要用作[ngModel] = files [i] .selectedDocumentItem(一個對象),則需要創建一個customError指令。 看起來像
@Directive({
selector: '[requiredId]',
providers: [{provide: NG_VALIDATORS, useExisting: RequiredIdDirective, multi: true}]
})
export class RequiredIdDirective implements Validator {
validate(control: AbstractControl): {[key: string]: any} | null {
return control.value.Id?null:{required:true}
}
}
現在我們的下拉列表就像
<kendo-dropdownlist name="select{{i}}" #name="ngModel"
[(ngModel)]="files[i].selectedDocumentItem"
[defaultItem]="files[i].selectedDocumentItem"
[data]="DocumentTypes"
textField="Name" valueField="Id" requiredId>
</kendo-dropdownlist>
看到新的堆疊閃電戰
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.