Tengo un formulario de reserva (es un modal), en el cual tengo varios imputs y un select. Cuando elijo que opcion quiero que aparezca por defecto en el select, este no aparece en el modal, se queda en blanco. Además, tengo un imput de tipo texto que siempre me aparece verificado como correcto, aunque no le escriba nada dentro. Si alguien puede ayudarme, ya intente de todas las maneras que encontré en la web para que me aparezca la opcion elegida pero no funciona, se queda el campo en blanco.
AGREGAR-RESERVA.COMPONENT.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
</head>
<body>
<div class="div1 text-center">
<span type="button" class="boton2" data-toggle="modal" data-target="#exampleModal">
<b>
Nuevo Turno
</b>
</span>
</div>
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Reservar Turno </h4>
</div>
<div class="modal-body">
<form class=" mb-4 bg-aqua" (ngSubmit)="registrarReservaTurno(formulario)" #formulario="ngForm">
<!-- <div class="form-group row">
<label class="col-form-label col-5">ID complejo:</label>
<input class="form-control col-6" type="text" name="idComplejo" id="idComplejo"
[(ngModel)]="complejo.idComplejo" readonly>
</div> -->
<div class="form-group row">
<label class="col-form-label col-5">Usuario logeado:</label>
<input class="form-control col-6" id="usuario" type="text" [(ngModel)]="usuario.nombreUsuario" name="usuario"
required #nombreApellido="ngModel" readonly>
<!-- <select class="form-control col-6" ngModel name="usuario" id="usuario" ngModel required minlength="1"
#usuarioComplejo="ngModel" [class.is-invalid]="usuarioComplejo.invalid && usuarioComplejo.touched"
[class.is-valid]="usuarioComplejo.valid">
<option value="" selected hidden>Seleccione Usuario Dueño</option>
<option *ngFor="let p of usuarios" [ngValue]="p">{{p.nombrePila +' '+ p.apellidoUsuario}}</option>
</select> -->
</div>
<div class="form-group row">
<label class="col-form-label col-5">Nombre:</label>
<input class="form-control col-6" id="title" type="text" [(ngModel)]="reserva.title" name="title"
placeholder="Ingrese nombre" required #nombreApellido="ngModel" [class.is-invalid]="nombreApellido.invalid && nombreApellido.touched"
minlength="5">
</div>
<div class="form-group row">
<label class="col-form-label col-5">Cancha:</label>
<select class="form-control col-6" [(ngModel)]="reserva.cancha" name="cancha" id="cancha" required
#cancha="ngModel" [class.is-invalid]="cancha.invalid && cancha.touched" [class.is-valid]="cancha.valid">
<option selected hidden>Seleccione la Cancha</option>
<option *ngFor="let c of canchas" [ngValue]="c">{{c.numeroCancha}}</option>
</select>
</div>
<!-- <div class="form-group row">
<label class="col-form-label col-5">Fecha:</label>
<input rows="4" class="form-control col-6" type="date" name="fechaReserva"
id="fechaReserva" placeholder="Fecha" [(ngModel)]="reserva.fechaReserva" required #fechaReserva="ngModel"
[class.is-invalid]="fechaReserva.invalid && fechaReserva.touched"
[class.is-valid]="fechaReserva.valid">
</div> -->
<div class="form-group row">
<label class="col-form-label col-5">Inicio:</label>
<p-calendar inputStyleClass="form-control" name="start" id="start" [(ngModel)]="reserva.start"
showTime="true" [minDate]="today" hourFormat="24" dateFormat="dd/mm/yy" placeholder="dd/mm/aaaa HH:00"
[showIcon]="true" [locale]="es" required><i class="fa fa-clock"></i></p-calendar>
<!-- <input class="form-control col-6" ng-model-options="{timezone:'UTC'}" type="datetime-local"
name="start" id="start" [(ngModel)]="reserva.start" required step="3600" [min]="today"
#start="ngModel" [class.is-invalid]="start.invalid && start.touched"
[class.is-valid]="start.valid"> -->
</div>
<!-- <div class="form-group row">
<label class="col-form-label col-5">Fin:</label>
<p-calendar inputStyleClass="form-control" name="fin" id="fin" [(ngModel)]="reserva.endDate" showTime="true" hourFormat="24" dateFormat="dd/mm/yy" [locale]="es" required></p-calendar>
<input class="form-control col-6" ng-model-options="{timezone:'UTC'}" type="time"
name="horaFin" id="horaFin" [(ngModel)]="reserva.fin" required #horaFin="ngModel"
[class.is-invalid]="horaFin.invalid && horaFin.touched"
[class.is-valid]="horaFin.valid">
</div> -->
<div class="form-group row">
<label class="col-form-label col-5">Precio:</label>
<input class="form-control col-6" type="number" name="precio" id="precio;" [(ngModel)]="reserva.precio"
required #precio="ngModel" [class.is-invalid]="precio.invalid && precio.touched"
[class.is-valid]="precio.valid">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" [disabled]="formulario.invalid" class="btn btn-success" id="btnGuardar">Reservar
Turno</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Atrás</button>
</div>
</div>
</div>
</div>
</body>
</html>
El problema está en el campo Nombre y en el select Cancha. Adjunto foto del modal y sus errores.