-1

我想从表单发送一些数据，但在此之前，填写表单的用户必须填写所有字段。其中两个字段带有 mat-select，其想法是在这些字段中有元素之前不会启用“提交”按钮。

用户可以选择数据，但问题是，如果他重新加载页面，mat-select 选择“消失”，但在内部已经存在 VALUE，所以如果我点击“提交”按钮，它会接受它但有它存储的数据（我用 sessionStorage 保存的数据），它不会把它当作空的。

所以我需要验证至少 2 件事中的 1 件事（或两者）：1）如果页面重新加载，在 mat-select 中选择的数据被删除，因此有一个“null”并且用户被迫选择一个选项（我使用了 required 但它对我不起作用）和2） “提交”按钮被禁用，直到用户 YES 或 YES 选择 mat-select 的 2 个框中的值。

HTML

<th class="encabezadoTablaCdp">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 class="encabezadoTablaCdp">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 class="enviarFlujo" [disabled]="listTiposNovedad.nombreParametro == null && tipoc.viewValue == null" color="accent" (click)="enviarCdpFlujo()">
   ENVIAR 
   <span class="material-icons-round">
      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);    
      }

我很感激任何帮助。谢谢！

4

1 回答 1

1

我认为你应该考虑使用反应形式。这是一个使用 localStorage 和提交表单所需的 2 个选择元素的示例。

于 2021-12-07T22:04:32.123 回答