Validating an Angular form with 2 dropdowns - html

Question

I am learning to code with a portfolio that I made in Angular frontend, Java Spring Boot backend and SQL database. I added dropdowns to some parts of Angular from tables connected to other tables in the database, with tables and models in backend, and with models in frontend.
This works ok with only 1 dropdown in a form, but now I am trying to have 2 dropdowns in the same form and I can not make it so the submit button is valid.
The component is mixed with english and spanish and is the following:
HTML form only:
<div class="card mat-card" class="section1" id="education">
<div id="education-experience" class="font-fluid" style="padding: 20px;">
<div id="education-experience-header">
<i class="fas fa-book-open"></i>
<h2 class="section-header">Educación</h2>
</div>
<div *ngIf="isAdmin">
<h3>Agregar o editar educación
<i class="fa-solid fa-plus add-btn" data-bs-toggle="modal" data-bs-target="#educacionModal"></i>
<br>Modo: {{accion}}
<br>Resetear modo <i class="fa-solid fa-rotate-left" (click)="cancelar()" type="reset"></i>
</h3>
<div class="modal fade" id="educacionModal" tabindex="-1" role="dialog" aria-labelledby="educacionModalLabel">
<div class="modal-dialog modal-xl" role="document" style="width: 100%; max-width: 1500px">
<div class="modal-content">
<div class="modal-header">
<div style="flex-direction: column-start;">
<h3 class="modal-title" id="educacionModalLabel">Modo: {{accion}}</h3>
<p class="modal-subtitle">Cada educación que se agrega, queda primera en la lista.</p>
</div>
</div>
<div class="modal-body">
<form [formGroup]="form" (ngSubmit)="crearEducacion()">
<div class="input-group mb-3">
<label class="input-group-text">Institución</label>
<input formControlName="schoolName" type="text" class="form-control" placeholder="Nombre de la institución"
[ngClass]="{'is-invalid':SchoolName?.errors && SchoolName?.touched, 'is-valid':!SchoolName?.errors && SchoolName?.touched}">
<div *ngIf="SchoolName?.errors && SchoolName?.touched">
<p *ngIf="SchoolName?.hasError('required')" class="text-danger" style="background-color: black;">
Ponga la institución.
</p>
</div>
</div>
<div class="input-group mb-3">
<label class="input-group-text">Título</label>
<input formControlName="title" type="text" class="form-control" placeholder="Título"
[ngClass]="{'is-invalid':Title?.errors && Title?.touched, 'is-valid':!Title?.errors && Title?.touched}">
<div *ngIf="Title?.errors && Title?.touched">
<p *ngIf="Title?.hasError('required')" class="text-danger" style="background-color: black;">
Ponga el título.
</p>
</div>
</div>
<div class="input-group mb-3">
<label class="input-group-text">Logo</label>
<input formControlName="logo" type="text" class="form-control"
placeholder="URL del logo (tiene que estar previamente en alguna página)">
</div>
<div class="row">
<div class="col-lg-3">
<div class="input-group mb-3">
<label class="input-group-text">Fecha de inicio</label>
<input formControlName="startDate" type="date" class="form-control" placeholder="Fecha de inicio"
[ngClass]="{'is-invalid':StartDate?.errors && StartDate?.touched, 'is-valid':!StartDate?.errors && StartDate?.touched}">
<div *ngIf="StartDate?.errors && StartDate?.touched">
<p *ngIf="StartDate?.hasError('required')" class="text-danger" style="background-color: black;">
Ponga la fecha de inicio.
</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="input-group mb-3">
<label class="input-group-text">Fecha de fin</label>
<input formControlName="endDate" type="date" class="form-control" placeholder="Fecha de fin"
[ngClass]="{'is-invalid':EndDate?.errors && EndDate?.touched, 'is-valid':!EndDate?.errors && EndDate?.touched}">
<div *ngIf="EndDate?.errors && EndDate?.touched">
<p *ngIf="EndDate?.hasError('required')" class="text-danger" style="background-color: black;">
Ponga la fecha de fin.
</p>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text">
Educación actual (poner cualquier fecha en fecha de fin y marcar el checkbox)
<input formControlName="currentEducation" type="checkbox" class="form-check-input"
placeholder="Educación actual">
</label>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="input-group mb-3">
<label class="input-group-text">Tipo de educación</label>
<select formControlName="educacion_tipo">
<option *ngFor="let educacion_tipo of educacion_tipoLista" [value]="educacion_tipo.id" placeholder="Tipo de educación"
[ngClass]="{'is-invalid':Educacion_tipo?.errors && Educacion_tipo?.touched, 'is-valid':!Educacion_tipo?.errors && Educacion_tipo?.touched}">
{{educacion_tipo.educationType}}
</option>
</select>
<p *ngIf="Educacion_tipo?.hasError('required')" class="text-danger" style="background-color: black;">
Ponga el tipo de educación.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="input-group mb-3">
<label class="input-group-text">Estado de educación</label>
<select formControlName="educacion_estado">
<option *ngFor="let educacion_estado of educacion_estadoLista" [value]="educacion_estado.id" placeholder="Estado de educación"
[ngClass]="{'is-invalid':Educacion_estado?.errors && Educacion_estado?.touched, 'is-valid':!Educacion_estado?.errors && Educacion_estado?.touched}">
{{educacion_estado.educationStatus}}
</option>
</select>
<p *ngIf="Educacion_estado?.hasError('required')" class="text-danger" style="background-color: black;">
Ponga el estado de educación.
</p>
</div>
</div>
<div class="input-group mb-3">
<label class="input-group-text">Descripción</label>
<input formControlName="educationDescription" type="text" class="form-control" placeholder="Descripción"
[ngClass]="{'is-invalid':EducationDescription?.errors && EducationDescription?.touched,
'is-valid':!EducationDescription?.errors && EducationDescription?.touched}">
<div *ngIf="EducationDescription?.errors && EducationDescription?.touched">
<p *ngIf="EducationDescription?.hasError('required')" class="text-danger" style="background-color: black;">
Ponga la descripción.
</p>
</div>
</div>
<div class="d-grip gap-2">
<button type="submit" class="btn btn-success btn-lg" [disabled]="!form.valid" data-bs-dismiss="modal">Aceptar</button>
<button type="reset" class="btn btn-danger btn-lg" (click)="cancelar()" data-bs-dismiss="modal" aria-label="Close">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
TypeScript:
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { EducacionEstado } from 'src/app/modelos/educacion-estado.model';
import { EducacionTipo } from 'src/app/modelos/educacion-tipo.model';
import { Educacion } from 'src/app/modelos/educacion.model';
import { EducacionService } from 'src/app/servicios/educacion.service';
import { TokenService } from 'src/app/servicios/token.service';
#Component({
selector: 'app-educacion',
templateUrl: './educacion.component.html',
styleUrls: ['./educacion.component.css']
})
export class EducacionComponent implements OnInit {
educacionLista?:Educacion[];
educacion:Educacion = { id: 0, schoolName: '', title: '', logo: '', startDate: new(Date), endDate: new(Date), educationDescription: '',
currentEducation: false, educacion_tipo: {id: 0, educationType: ''}, educacion_estado:{id: 0, educationStatus: ''},persona: 0 };
accion = 'Agregar';
form: FormGroup;
id: number | undefined;
authority!:string;
isAdmin = false;
educacion_tipo:EducacionTipo = { id: 0, educationType: '' };
educacion_tipoLista?:EducacionTipo[];
educacion_estado:EducacionEstado = { id: 0, educationStatus: '' };
educacion_estadoLista?:EducacionEstado[];
constructor(private educacionService:EducacionService, private fb:FormBuilder, private tokenService: TokenService) {
this.form = this.fb.group({
schoolName: ['',[Validators.required]],
title:['',[Validators.required]],
logo: [''],
startDate: [0,[Validators.required]],
endDate: [0,[Validators.required]],
studiesStatus: ['',[Validators.required]],
educationDescription: ['',[Validators.required]],
currentEducation: false,
educacion_tipo: ['',[Validators.required]],
educacion_estado: ['',[Validators.required]]
})
}
ngOnInit(): void {
this.obtenerEducacion();
this.obtenerEducacionTipo();
this.obtenerEducacionEstado();
this.isAdmin = this.tokenService.isAdmin();
}
obtenerEducacion(){
this.educacionService.obtenerEducacion().subscribe(educacion => {
this.educacionLista=educacion;
}, error => {
console.log(error)
})
}
obtenerEducacionTipo(){
this.educacionService.obtenerEducacionTipo().subscribe(educacion_tipo => {
this.educacion_tipoLista=educacion_tipo;
}, error => {
console.log(error)
});
}
obtenerEducacionEstado(){
this.educacionService.obtenerEducacionEstado().subscribe(educacion_estado => {
this.educacion_estadoLista=educacion_estado;
}, error => {
console.log(error)
});
}
crearEducacion() {
const educacion: Educacion = {
schoolName: this.form.get('schoolName')?.value,
title: this.form.get('title')?.value,
logo: this.form.get('logo')?.value,
startDate: this.form.get('startDate')?.value,
endDate: this.form.get('endDate')?.value,
educationDescription: this.form.get('educationDescription')?.value,
currentEducation: this.form.get('currentEducation')?.value,
educacion_tipo: this.educacion_tipoLista!.find(et=>et.id==this.form.get('educacion_tipo')?.value),
educacion_estado: this.educacion_estadoLista!.find(es=>es.id==this.form.get('educacion_estado')?.value)
}
if(this.id == undefined) {
this.educacionService.crearEducacion(educacion).subscribe(educacion => {
this.obtenerEducacion();
this.form.reset();
}, error => {
console.log(error);
})
} else {
educacion.id = this.id;
this.educacionService.actualizarEducacion(this.id, educacion).subscribe(educacion => {
this.form.reset();
this.accion = 'Agregar';
this.id = undefined;
this.obtenerEducacion();
}, error => {
console.log(error);
})
}
}
borrarEducacion(id: number) {
this.educacionService.borrarEducacion(id).subscribe(educacion =>{
this.obtenerEducacion()
}, error => {
console.log(error);
})
}
actualizarEducacion(educacion: Educacion) {
this.accion = 'Editar educación: ' + educacion.title + ' en ' + educacion.schoolName;
this.id = educacion.id;
this.form.patchValue({
schoolName: educacion.schoolName,
title: educacion.title,
logo: educacion.logo,
startDate: educacion.startDate,
endDate: educacion.endDate,
educationDescription: educacion.educationDescription,
currentEducation: educacion.currentEducation,
educacion_tipo: educacion.educacion_tipo?.id,
educacion_estado: educacion.educacion_estado?.id
})
}
cancelar(){
this.form.reset();
this.accion = 'Agregar';
this.id = undefined;
this.obtenerEducacion();
}
get SchoolName(){
return this.form.get('schoolName');
}
get Title(){
return this.form.get('title');
}
get StartDate(){
return this.form.get('startDate');
}
get EndDate(){
return this.form.get('endDate');
}
get EducationDescription(){
return this.form.get('educationDescription');
}
get Educacion_tipo(){
return this.form.get('educacion_tipo');
}
get Educacion_estado(){
return this.form.get('educacion_estado')
}
}
There is a service for HTTP, models for educacion, educacion_tipo and educacion_estado and JWT for editing. I had educacion_tipo and it worked, but I added educacion_estado and the form will not become valid. Removing validators from HTML and TypeScript also does not work. The only workaround is removing is valid from submit, but I would like to keep that validation in the component.