Значение не выбрано угловое 6

Question

Я новичок в угловых 6. Я просто создаю угловую форму с проверкой.Я успешно выполнил проверки.Единственная проблема заключается в том, что первое значение в поле выбора отображается пустым.Вот код:

<div class="form-group" [ngClass]="{ 'is-invalid': submitted && f.roles.errors }">
  <label>Role*</label>
  <select class="form-control" id="exampleFormControlSelect1"  [(ngModel)]="team.roles" formControlName="roles"  [ngClass]="{ 'is-invalid': submitted && f.roles.errors }">
    <option value="">Please Select</option>
    <option  *ngFor="let roles of teamRoles" value="{{roles.id}}">{{roles.admin_role}}</option>
  </select>
</div>

Вот код компонента:

this.teamForm = this.formBuilder.group({    
  name: ['', [Validators.required]],
  roles: ['', [Validators.required]],
  fileData: ['', [Validators.required]],
  password: ['', [Validators.required,Validators.minLength(5)]],
  email: ['', [Validators.required, Validators.email]],
  phone: ['', [Validators.required,Validators.minLength(10)]],
  recovery: ['', [Validators.required, Validators.email]],
});

Я хочу Пожалуйста, выберите должен быть выбран.

Answer 1

Если удалить [(ngModel)]="team.roles", оно должно работать

Answer 2

Проблема возникла из [(ngModel)]="team.roles" вы пытаетесь связать данные выбора со всем списком team.roles:

Попробуйте определить выбранное значение в классе вашего компонента

selectRole:string = "player" 

и вы выбираете:

[(ngModel)]="selectRole"