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-12 20:17:36Z

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, 2019 at 20:17

answered Aug 11, 2019 at 18:59

Rias

1,99622 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

meai2312 Over a year ago

hi @rias, thanks for your help. sadly I get the same error after changing the line to roles: [['']] and ng serve again

Rias Over a year ago

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: [[]]

meai2312 Over a year ago

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!!

Rias Over a year ago

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.

Parinda Rajapaksha · Accepted Answer · 2022-06-17 05:33:58Z

0

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

answered Jun 17, 2022 at 5:33

Parinda Rajapaksha

3,1271 gold badge40 silver badges41 bronze badges

Collectives™ on Stack Overflow

Angular Reactiveforms Dropdown (multiple)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related