tengo un formulario reactivo en angular 10, tengo varios input radios y select. todo funciona bien excepto el radio. lo que quiero es que al tratar de enviar el formulario con los campos vacios o no seleccionados me aparezca un aviso y no me deje. funciona todo pero el radio no funciona aqui mi codigo de nombre y los radios como ejemplo
<form [formGroup]="registerForm">
<div class="modal-body">
<div class="form-group">
<label>NOMBRE</label>
<input type="text" formControlName="nombre" class="form-control form-control-sm" [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
<div *ngIf="submitted && f.nombre.errors" class="invalid-feedback">
<p *ngIf="f.nombre.errors.required">requiere NOMBRE</p>
<p *ngIf="f.nombre.errors.minlength">Mínimo 4 char</p>
<p *ngIf="f.nombre.errors.pattern">Ingrese solo letras</p>
</div>
</div>
<div class="form-group">
<label>Genero</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="Masculino" formControlName="genero" name="genero" value="M">
<label class="form-check-label" for="Masculino">Masculino</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="Femenino" formControlName="genero" name="genero" value="F">
<label class="form-check-label" for="Femenino">Femenino</label>
</div>
<div *ngIf="submitted && f.genero.errors" class="invalid-feedback">
<p *ngIf="f.genero.errors.required"> Seleccione un genero </p>
</div>
</div>
</div>
</form>
en el ts lo tengo asi
this.registerForm = this.formBuilder.group({
nombre:['',[Validators.required,Validators.minLength(3),Validators.pattern(/^([A-Za-z áÁéÉíÍóÓúÚñÑüÜ]+)$/)]],
genero:['',[Validators.required]]
})
psta: el formulario esta en un modal. y uso bootstrap5