como puede ver en la captura de pantalla a continuación, tengo 2 botones que usan el grupo de radio mat, si modelForm.get ('programación'). El valor es igual a '1', solo muestra el botón de opción del grupo de radio mat donde el valor es 'A ' más mostrar todo el valor de las etapas que son 'A' y 'B'.
Como hacemos eso ? ¿Cómo ocultamos solo cierto botón del ciclo en función de un valor? Gracias.
#html
<mat-radio-group [disabled]="!modelForm.get('schedule').value" [(ngModel)]="stage" layout="column"> <mat-radio-button *ngFor="let stage of stages" [value]="stage.text" color="primary"> {{ stage.text }} </mat-radio-button> </mat-radio-group>#TS
stages = [ {id: 0, text: 'A'}, {id: 1, text: 'B'}, ]en lugar de `[oculto] puedes usar
[style.display]="isHidden(stage)?'none':null"Otra forma puede ser
<mat-radio-group [(ngModel)]="stage" layout="column"> <!--always show the first you use "stages[0]"--> <mat-radio-button [value]="stages[0].text"> {{ stages[0].text }} </mat-radio-button> <!--the rest show or not--> <ng-container *ngIf="modelForm.get('schedule').value !== '1'"> <ng-container *ngFor="let stage of stages;let first=first"> <mat-radio-button *ngIf="!first" [value]="stage.text" color="primary"> {{ stage.text }} </mat-radio-button> </ng-container> <ng-container> </mat-radio-group>Nota: cuando el valor de la programación se cambia a 1 , debe establecer la propiedad del stage en 'A' mediante programación para que esta solución funcione.
Puede usar la clase html para ocultar y mostrar.
<mat-radio-group [disabled]="!formGroup.get('password').value" [(ngModel)]="stage" [ngModelOptions]="{ standalone: true }" layout="column" > <mat-radio-button *ngFor="let stage of stages" [value]="stage.text" color="primary" [ngClass]="{ isHidden: isHidden(stage) }" > {{ stage.text }} </mat-radio-button> </mat-radio-group>estilos.css
.isHidden { visibility: hidden; width: 0; }t
import { Component } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators, } from '@angular/forms'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { formGroup: FormGroup; titleAlert: string = 'This field is required'; post: any = ''; stages = [ { id: 0, text: 'A' }, { id: 1, text: 'B' }, ]; isHidden(stage) { return ( this.formGroup.get('password').value === '1' && stage && stage.id === 1 ); }