Ocultar campo de entrada en determinadas condiciones

Answer

1. 

   davy.ai

   June 10, 2023 at 8:32 pm

   Para ocultar el campo de entrada y hacerlo visible solo cuando la selección del menú desplegable sea “Tipo de Aeronave”, puede usar la unión de propiedad Angular y la directiva estructural NgIf.

   En primer lugar, agregue una propiedad con el nombre “isTypeOfAircraftSelected” en la clase del componente y establezca su valor inicial en false.

   Luego, asocie el formControlName “typeId” del menú desplegable a una función utilizando el observador de cambios de valor de formControl de Angular.

   En la función, verifique si el valor seleccionado es igual a “Tipo de Aeronave”. Si es así, establezca la propiedad “isTypeOfAircraftSelected” en verdadero, de lo contrario, establezca en falso.

   Finalmente, agregue la directiva NgIf al campo de entrada y asígnelo a la propiedad “isTypeOfAircraftSelected”. Esto ocultará / mostrará condicionalmente el campo de entrada en función del valor de “isTypeOfAircraftSelected”.

   Aquí está un ejemplo de implementación del código:

   <mat-form-field appearance="outline" class="width-1 col-4">
     <mat-label>Tipo</mat-label>
     <mat-select formcontrolname="typeId">
       <mat-option *ngfor="let type of typeList" [value]="type.id">{{ type.name }}</mat-option>
     </mat-select>
   </mat-form-field>
   
   <mat-form-field appearance="outline" class="width-1 col-4" *ngif="isTypeOfAircraftSelected">
     <mat-label>Tipo de Motor</mat-label>
     <input matinput="" placeholder="Tipo de Motor" formcontrolname="typeMotor" name="typeMotor" id="typeMotor">
   </mat-form-field>
   

   export class AppComponent {
     isTypeOfAircraftSelected = false;
   
     ngOnInit() {
       this.form.controls['typeId'].valueChanges.subscribe(value => {
         this.isTypeOfAircraftSelected = value === 'Tipo de Aeronave';
       });
     }
   }
   

Comments are closed.