All Forms of my application load without applying the theme (Appearance), I already tried solutions like adding @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in my style.scss and also checked the module imports, are OK! I use Angular 13
I'm using vex theme
When I open localhost:4200 on the screen that opens the modal, it works normally, but if I change the route and then return, the inputs stop appearing, no error is shown
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'vex-cadastrar-editar-servico',
templateUrl: './cadastrar-editar-servico.component.html',
styleUrls: ['./cadastrar-editar-servico.component.scss']
})
export class CadastrarEditarServicoComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
nome: ['', Validators.required],
tempo: ['', Validators.required],
categoria: ['', Validators.required],
valor: ['', Validators.required]
});
}
}<div class="form">
<!-- Titulo do modal -->
<div
class="px-6 py-4 border-b"
id="title"
fxLayout="row"
fxLayoutAlign="start center"
>
<h2 class="title m-0">Novo Serviço</h2>
</div>
<!-- modal -->
<mat-dialog-content>
<div [formGroup]="form" class="example-form">
<!-- Nome do servico -->
<div class="nome">
<mat-form-field class="example-full-width" id="inpN">
<mat-label class="nome">Nome do serviço</mat-label>
<input formControlName="nome" matInput required />
<mat-error *ngIf="form.get('nome').hasError('required')">
Preencha este campo!
</mat-error>
</mat-form-field>
</div>
<!-- Tempo estimado -->
<div class="tempoEs">
<mat-form-field id="tempoEst">
<mat-label>Tempo Estimado</mat-label>
<input
formControlName="tempo"
type="text"
matInput
placeholder="Digite o Tempo"
maxlength="3"
required
/>
<span matTextPrefix class="minutos">Minutos </span>
<mat-error *ngIf="form.get('tempo').hasError('required')">
Preencha este campo!
</mat-error>
</mat-form-field>
<!-- Categoria -->
<mat-form-field id="categoria">
<mat-label>Categoria</mat-label>
<mat-select formControlName="categoria" required>
<mat-option value="option">Cabelo</mat-option>
<mat-option value="option">Barba</mat-option>
</mat-select>
<mat-error
*ngIf="form.get('categoria').hasError('required')"
>
Selecione uma opção!
</mat-error>
</mat-form-field>
</div>
<!-- area de descricao -->
<div class="descricao">
<mat-form-field class="example-full-width" id="descricao">
<mat-label>Descrição do serviço</mat-label>
<input
matInput
placeholder="Ex. Tipo de corte, tipo de barba..."
/>
</mat-form-field>
</div>
<!-- toggle de valor promocional -->
<div class="toggle">
<mat-slide-toggle
><b
>Este serviço mostrará o valor promocional</b
></mat-slide-toggle
>
</div>
<!-- valor e valor promocional -->
<div class="valor">
<mat-form-field floatLabel="always" class="intval">
<mat-label>Valor</mat-label>
<span matTextPrefix>R$ </span>
<input
formControlName="valor"
id="valor"
matInput
type="number"
class="example-right-align"
placeholder="0"
/>
<mat-error *ngIf="form.get('valor').hasError('required')">
Preencha este campo!
</mat-error>
</mat-form-field>
<!-- valor promocional -->
<mat-form-field floatLabel="always" class="intval">
<mat-label>Valor Promocional</mat-label>
<span matTextPrefix>R$ </span>
<input
formControlName="valor"
id="valorP"
matInput
type="number"
class="example-right-align"
placeholder="0"
/>
<mat-error *ngIf="form.get('valor').hasError('required')">
Preencha este campo!
</mat-error>
</mat-form-field>
</div>
</div>
</mat-dialog-content>
<!-- botoes adicionar e cancelar -->
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancelar</button>
<button
mat-button
[mat-dialog-close]="true"
mat-raised-button
color="primary"
>
Adicionar
</button>
</mat-dialog-actions>
</div> "dependencies": {
"@angular/animations": "^13.0.2",
"@angular/cdk": "^13.0.2",
"@angular/common": "^13.0.2",
"@angular/compiler": "^13.0.2",
"@angular/core": "^13.0.2",
"@angular/flex-layout": "12.0.0-beta.35",
"@angular/forms": "^13.0.2",
"@angular/material": "^13.0.2",
"@angular/platform-browser": "^13.0.2",
"@angular/platform-browser-dynamic": "^13.0.2",
"@angular/router": "^13.0.2",
"@iconify/icons-emojione": "~1.1.0",
"@iconify/icons-fa-brands": "~1.1.0",
"@iconify/icons-fa-solid": "^1.1.1",
"@iconify/icons-ic": "^1.1.6",
"@iconify/icons-logos": "^1.1.10",
"@ngneat/until-destroy": "~9.0.0",
"@ngx-loading-bar/core": "^5.1.2",
"@ngx-loading-bar/router": "^5.1.2",
"@visurel/iconify-angular": "~11.0.0",
"angular-calendar": "~0.29.0-beta.10",
"apexcharts": "~3.25.0",
"date-fns": "~2.19.0",
"express": "^4.18.2",
"highlight.js": "~10.6.0",
"luxon": "~1.26.0",
"ngx-quicklink": "~0.2.7",
"ngx-quill": "~16.0.1",
"ngx-showdown": "~6.0.0",
"path": "^0.12.7",
"quill": "~1.3.7",
"rxjs": "^6.6.7",
"showdown": "~1.9.1",
"simplebar": "~5.3.6",
"tailwindcss": "^2.2.19",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
}
