提交按钮的条件和 selected 项从 mat-select Angular Material

Question

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

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

所以我需要至少验证两件事中的一件（或两者）：1) 如果页面重新加载，selected 中的数据mat-select 被删除，因此有一个“空”并且用户被迫 select 一个选项（我已经使用 required 但它对我不起作用）和 2)“提交”按钮被禁用，直到用户 YES OR YES selects 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);    
      }

感谢任何帮助。谢谢！

Answer 1

我认为你应该考虑使用响应式表单。 Here 是一个使用 localStorage 和提交表单所需的 2 个 select 元素的示例。

提交按钮的条件和 selected 项从 mat-select Angular Material

Condition for submit button and selected items from a mat-select Angular Material

angular

button

submit

form-submit

mat-select