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