The Wayback Machine - https://web.archive.org/web/20200515221616/https://github.com/angular/components/issues/19118
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: clarify form control usage in form-field w/ chip-list and chip-input #19118

Open
btxtiger opened this issue Apr 19, 2020 · 4 comments
Open

docs: clarify form control usage in form-field w/ chip-list and chip-input #19118

btxtiger opened this issue Apr 19, 2020 · 4 comments
Assignees
Labels

Comments

@btxtiger
Copy link

@btxtiger btxtiger commented Apr 19, 2020

Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/angular-b8qqaf

Steps to reproduce:

  1. Create chip list input
    https://material.angular.io/components/chips/overview
  2. Disable form field

Expected Behavior

What behavior were you expecting to see?
Should be disabled, light gray color

Actual Behavior

What behavior did you actually see?
Is functionally disabled, but not visibly

Environment

  • Angular: 9
  • CDK/Material: 9
  • Browser(s): Edge chromium
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
@btxtiger
Copy link
Author

@btxtiger btxtiger commented Apr 19, 2020

It seems mat-form-field-disabled ist not added for chip-list form-fields, and form-field ist still focusable

@devversion
Copy link
Member

@devversion devversion commented Apr 21, 2020

The problem here is that the MatChipList is the actual form-field control. The form control state of the input is not propagated to the chip list, nor to the parent form-field.

A fix would be to capture the disabled state of the input in the chip list, but conceptually it should be the other way around. i.e. the chip-list is the primary source of data, and notifies the chip input if it should be disabled. It's possible that the input is disabled while the chip list is not, right?

In your concrete StackBlitz, a fix would be toggle the disabled state on the chip-list. Either by using the disabled input or by using a form control on the chip list.

We should probably clarify this in the documentation. Happy to chat more about it though.

@btxtiger
Copy link
Author

@btxtiger btxtiger commented Apr 21, 2020

@devversion
Indeed, i just moved the [formControl]="fruitControl" from input to mat-chip-list and disabling works properly. On the other hand adding [disabled]="fruitCtrl.disabled" to mat-chip-list also works. So this is not a bug.

Maybe the example in the docs could have a correctly placed formControl directive or [(ngModel)], to make it obvious. I did not realize that mat-chip-list could be a form field, so I implemented a class member array to manage the chip-list data.

@devversion
Copy link
Member

@devversion devversion commented Apr 22, 2020

@btxtiger Yeah, I agree. We should make this more obvious in the docs. Feel free to send a PR if you want. Otherwise I can have a look when I get a chance.

@devversion devversion added docs P4 and removed needs triage labels Apr 22, 2020
@devversion devversion self-assigned this Apr 22, 2020
@devversion devversion changed the title bug(mat-form-field): Form-field disabled not working with mat-chip-list docs: clarify form control usage in form-field w/ chip-list and chip-input Apr 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.