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

I want to send some data from a form but, before that, the user who is filling in the form MUST fill in all the fields. Two of those fields are with mat-select and the idea is that the "Submit" button is not enabled until there is an element in those fields.

The user can select the data but the problem is that if he reloads the page, the mat-select selection "disappears", but internally THERE IS ALREADY A VALUE, so if I click the "submit" button, it will accept it but with the data that it has stored (that data I save with sessionStorage), it is not taking it as if it were empty.

So I need to validate at least 1 of 2 things (or both): 1) if the page reloads, the data that was selected in the mat-select is deleted so that there is a "null" and the user is forced to select one option (I have used required but it doesn't work for me) and 2) the "submit" button is disabled until the user YES OR YES selects the values in the 2 boxes of the mat-select.

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>

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);    
      }

I appreciate any help. Thanks!

CodePudding user response：

I think you should consider using reactive forms. Here is an example that uses localStorage and 2 select elements that are required to submit the form.