提交按钮的条件和 selected 项从 mat-select Angular Material
Condition for submit button and selected items from a mat-select Angular Material
我想从表单发送一些数据,但在此之前,填写表单的用户必须填写所有字段。其中两个字段带有 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);
}
感谢任何帮助。谢谢!
我认为你应该考虑使用响应式表单。 Here 是一个使用 localStorage 和提交表单所需的 2 个 select 元素的示例。
我想从表单发送一些数据,但在此之前,填写表单的用户必须填写所有字段。其中两个字段带有 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);
}
感谢任何帮助。谢谢!
我认为你应该考虑使用响应式表单。 Here 是一个使用 localStorage 和提交表单所需的 2 个 select 元素的示例。