Angular Reactiveforms Dropdown (multiple)

Question

I would like to activate the multiple option for the selection in the dropdown menu to store multiple values in an array, but I get the error:

UsermanagementCreateComponent.html:6 ERROR Error: Can't assign single value if select is marked as multiple

component.html

      <div class="form-group row">
          <label for="inputRole" class="label col-sm-3 col-form-label">Role</label>
          <ng-container *ngIf="_userRoles$ | async as roles">
            <!-- <div class="col-sm-3"> -->
              <nb-select multiple placeholder="Multiple Select" formControlName="roles">
                <nb-option *ngFor="let role of roles" [value]='role._id'>{{role._id}}</nb-option>
              </nb-select>
            <!-- </div> -->
          </ng-container>
        </div>

component.ts

export class UsermanagementCreateComponent implements OnInit {

  createUserForm: FormGroup;
  private _userRoles$: Observable<Role[]>;
  roles: any;

  constructor(private _http: HttpClient,
    private _usersService: UsersService,
    private _roleService: RoleService,
    private _router: Router,
    private _formBuilder: FormBuilder) { }


  ngOnInit() {
    this.loadRoles()
    this.createUserForm = this._formBuilder.group({
      username: [''],
      firstName: [''],
      lastName: [''],
      email: [''],
      password: [''],
      roles: [''],
    })
  }

  loadRoles() {
    this._userRoles$ = this._roleService.getRoles();
  }

Answer 1

As the formControl roles is supposed to be an array your form group needs to set a multiple value initially.

private createUserForm: FormGroup;
private initialState = {
  username: '',
  firstName: '',
  lastName: '',
  email: '',
  password: '',
  roles: []
};

createForm() {
  this.createUserForm = this._formBuilder.group({
    username: [this.initialState.username],
    firstName: [this.initialState.firstName],
    lastName: [this.initialState.lastName],
    email: [this.initialState.email],
    password: [this.initialState.password],
    roles: [this.initialState.roles]
  })
}

resetForm() {
  this.createUserForm.reset(this.initialState);
}