我想從表單發送一些資料，但在此之前，填寫表單的用戶必須填寫所有欄位。其中兩個欄位與 mat-select 一起使用，其想法是在這些欄位中有元素之前不會啟用“提交”按鈕。
用戶可以選擇資料，但問題是如果他重新加載頁面，墊選擇選擇“消失”，但在內部已經有一個值，所以如果我點擊“提交”按鈕，它會接受它，但是它存盤的資料（我用 sessionStorage 保存的資料），它不會把它當作是空的。
所以我需要驗證兩件事中的至少一件事（或兩者）：1）如果頁面重新加載，則在 mat-select 中選擇的資料將被洗掉，以便有一個“空”并且用戶被迫選擇一個選項（我使用了 required 但它對我不起作用）和2） “提交”按鈕被禁用，直到用戶 YES OR YES 選擇了 mat-select 的 2 個框中的值。
HTML
<th >TIPO DE TRáMITE</th>
<td>
<mat-select placeholder="Tipo Trámite" name="tipoTramite" [(ngModel)]="tipoTramiteValue" (change)="onChange(tipoTramiteValue)">
<ng-container *ngFor="let tipoTramite of listTiposNovedad">
<mat-option *ngIf="!(tipoTramite.nombreParametro == 'TERMINACIóN ANTICIPADA' || tipoTramite.nombreParametro == 'PRóRROGA' || tipoTramite.nombreParametro == 'SUSPENSIóN')" [value]="tipoTramite.nombreParametro" >
{{tipoTramite.nombreParametro}}
</mat-option>
</ng-container>
</mat-select>
</td>
<th >TIPO DE CDP</th>
<td>
<mat-select placeholder="Tipo CDP" name="tipoCdp" [(ngModel)]="tipoCdpValue" (ngModelChange)="onChangeCdp($event)">
<ng-container *ngFor="let gas of tipoc">
<mat-option [value]="gas.viewValue">
{{gas.viewValue}}
</mat-option>
</ng-container>
</mat-select>
</td>
<button mat-raised-button [disabled]="listTiposNovedad.nombreParametro == null && tipoc.viewValue == null" color="accent" (click)="enviarCdpFlujo()">
ENVIAR
<span >
keyboard_tab
</span>
</button>
TS
interface tipoCdp {
value: string;
viewValue: string;
onChange(option){
console.log(option);
this.tipoNovedad = option;
sessionStorage.setItem('tipoTramite', option);
switch(option){
case "ADICIóN":
this.adicionIsSelected=true;
this.anulacionIsSelected=false;
this.expedicionIsSelected =false;
this.reduccionIsSelected=false;
break;
case "ANULACIóN":
this.adicionIsSelected=false;
this.anulacionIsSelected=true;
this.expedicionIsSelected =false;
this.reduccionIsSelected=false;
break;
case "EXPEDICIóN":
this.adicionIsSelected=false;
this.anulacionIsSelected=false;
this.expedicionIsSelected =true;
this.reduccionIsSelected=false;
break;
case "REDUCCIóN":
this.adicionIsSelected=false;
this.anulacionIsSelected=false;
this.expedicionIsSelected =false;
this.reduccionIsSelected=true;
break;
}
}
tipoc: tipoCdp[] = [
{value: 'gasto-0', viewValue: 'GASTO'},
{value: 'modificacion-1', viewValue: 'MODIFICACIóN ANEXO DECRETO'}
];
onChangeCdp(event) {
console.log(event);
this.tipoCdp = event;
sessionStorage.setItem('tipoCdp', event);
}
我很感激任何幫助。謝謝！
uj5u.com熱心網友回復：
我認為您應該考慮使用反應式形式。這是一個使用 localStorage 和 2 個提交表單所需的 select 元素的示例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/376704.html