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();
  }

Rias · Accepted Answer · 2019-08-12T20:17:36.483

3

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

edited Aug 12 '19 at 20:17

answered Aug 11 '19 at 18:59

Rias

1,956
22
33

hi @rias, thanks for your help. sadly I get the same error after changing the line to `roles: [['']]` and `ng serve` again – meai2312 Aug 11 '19 at 21:08
You have to make sure, that you only try to assign array values to the roles property of your formGroup. I don't exactly know where you assign values other then during ngOnInit, so the error might be at a different point in your application. You may also try to initialize roles with an empty array: `roles: [[]]` – Rias Aug 12 '19 at 09:23
he @Rias thanks again for your help. when I delete `this.createUserForm.reset()` from onSubmit event, then I get no error anymore. Maybe you have detailed knowledge why...but thanks again for your help!! – meai2312 Aug 12 '19 at 13:50
hi @meai2312 can you please post the according method. I think that you may need to pass the initial values for your form to the reset function like this: `this.createUserForm.reset({ username: '', firstName: '', lastName: '', email: '', password: '', roles: [] })`. Roles will be set to an empty array again. – Rias Aug 12 '19 at 20:13

score 0 · Answer 2 · answered Jun 17 '22 at 05:33

Without resetting you can initiate formGroup again as follows. This resolved the problem.

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

resetForm(){
  this.initFormGroup()
}

Angular Reactiveforms Dropdown (multiple)

2 Answers2