时间戳

首页 > 解决方案 > 值未选择角度 6

javascript - 值未选择角度 6

问题描述

我是 Angular 6 的新手。我只是在创建一个带有验证的 Angular 表单。我已成功实施验证。唯一的问题是选择框的第一个值显示为空。这是代码：

<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]],
});

我想要请选择应该被选中。

标签： javascriptangular

解决方案

问题来自[(ngModel)]="team.roles"您试图将 select 的数据与整个team.roles列表绑定：

尝试在组件类中定义选定的值

selectRole:string = "player"

并在您选择：

[(ngModel)]="selectRole"

推荐阅读