angular / angular/components

mat-selection-list list-options is not updated when formControl for mat-selection-list is updated with setValue

Open
#15,477 3 comments 10 reactions 0 assignees View on GitHub
area: material/list P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?
Checkboxes should update

#### What is the current behavior?
Checkboxes do not update.

#### What are the steps to reproduce?
**editor.componenet.html**
```html

{{ role.attributes.name }}

```

**editor.component.ts (onInit)**
```javascript
this.form = this.fb.group({
role: [[...this.user.attributes.role], Validators.required],
});
```

`this.user.attributes.role` is an array of string.

**I tried**
**editor.component.ts**
```javascript
ngAfterContentInit() {
this.form.patchValue({
'role': [...this.user.attributes.role]
});
}
```

**I also tried**
**editor.component.ts**
```javascript
ngAfterContentInit() {
setTimeout(() => {
this.form.patchValue({
'role': [...this.user.attributes.role]
});
console.log(this.form.value.role);
}, 1000);
}
```

Note that I'm getting `roles` with an observable :
**editor.component.ts**
```javascript
combineLatest(
// Others observables ...
this.jsonApi.all('roles').pipe(map(document => document.data)),
).subscribe(([firms, langs, roles]) => {
// Others observables ...
this.roles = roles;
});
```

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.x.x
Material 7.x.x

#### Is there anything else we should know?
I know there's a [ticket](https://github.com/angular/material2/issues/9085) about this, but it's closed and no one replies

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue using editor.component.html and editor.component.ts with an Angular 7 mat-selection-list, asynchronous roles, and formControl setValue or patchValue. Start by tracing mat-selection-list and mat-list-option value propagation; done means the checkboxes reflect the updated string array after the form is updated.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.