Aspecto del campo de formulario Angular Mat
¿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’.
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:strictTemplates
comofalse
enangularCompilerOptions
dentro del archivotsconfig.json
.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.En tu archivo component.html, utiliza
[ngStyle]
para aplicar dinámicamente el estilo de apariencia basado en el valor desomevariable
yappearanceStyle
: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.