es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Aspecto del campo de formulario Angular Mat

01 Aug, 2023 Programación

¿Cómo implemento esto en Angular 12?

A continuación se muestra el código en mi archivo HTML:

<mat-form-field style="width: 70px;" [appearance]="somevariable ? 'none' : 'legacy'">
  <input matinput="" type="text" formcontrolname="name" [readonly]="VOForm.get('VORows').value[i].isEditable">
</mat-form-field>

Aquí, el atributo ‘appearance’ no toma el valor “none” debido a que “strictTemplates: true” está configurado en “angularCompilerOptions”.

¿Cuál es la solución alternativa? Aún quiero utilizar Mat-form-field.

Mi caso de uso es que cuando ‘somevariable’ es verdadero, no se debe aplicar el estilo, pero si el valor es falso, se debe aplicar el estilo ‘legacy’.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para implementar esto en Angular 12 con mat-form-field y solucionar el problema del atributo de apariencia, puedes utilizar el siguiente método alternativo:

    1. Establece strictTemplates como false en angularCompilerOptions dentro del archivo tsconfig.json.

    2. En tu archivo component.ts, define appearanceStyle como una variable de tipo string y asígnale un valor de "none" o "legacy" dependiendo de tu caso de uso.

    3. En tu archivo component.html, utiliza [ngStyle] para aplicar dinámicamente el estilo de apariencia basado en el valor de somevariable y appearanceStyle:

    <mat-form-field style="width: 70px;" [ngstyle]="{'appearance': somevariable ? appearanceStyle : ''}">
  <input matinput="" type="text" formcontrolname="name" [readonly]="VOForm.get('VORows').value[i].isEditable">
</mat-form-field>

    Con este método alternativo, aún puedes utilizar mat-form-field y aplicar el estilo de apariencia condicionalmente según tu caso de uso.

Comments are closed.