Skip to content

Add support for showing validation errors in DynamicMaterialChipsComponent . #1052

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

Open
padala opened this issue Dec 19, 2019 · 1 comment
Open

Comments

@padala
Copy link

padala commented Dec 19, 2019

I'm submitting a


[x] Bug / Regression
[ ] Feature Request / Proposal

I'm using


NG Dynamic Forms Version: `X.Y.Z`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[x] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

Add support for showing validation errors for auto complete chip-list in material (DynamicMaterialChipsComponent).

`<mat-form-field [appearance]="model.getAdditional('appearance', 'legacy')"
[color]="model.getAdditional('color', 'primary')"
[floatLabel]="model.getAdditional('floatLabel', LABEL_OPTIONS && LABEL_OPTIONS['float'] || 'auto')"
[formGroup]="group"
[hideRequiredMarker]="model.getAdditional('hideRequiredMarker', false)"
[ngClass]="getClass('grid', 'control')">

<mat-chip-list #matChipList [formControlName]="model.id" [id]="id" [multiple]="true">

    <mat-chip *ngFor="let chip of chips; let index = index"
              [selectable]="false"
              (removed)="onChipRemoved(chip, index)">

        <span>{{ chip }}</span>

        <mat-icon matChipRemove>cancel</mat-icon>

    </mat-chip>

    <input matInput
           [matAutocomplete]="matAutocomplete"
           [matChipInputAddOnBlur]="model.getAdditional('matChipInputAddOnBlur', true)"
           [matChipInputFor]="matChipList"
           [matChipInputSeparatorKeyCodes]="model.getAdditional('matChipInputSeparatorKeyCodes', CHIPS_OPTIONS['separatorKeyCodes'])"
           [placeholder]="model.placeholder"
           (matChipInputTokenEnd)="onChipInputTokenEnd($event)"
           (blur)="onBlur($event)"
           (focus)="onFocus($event)"/>

    <mat-autocomplete #matAutocomplete="matAutocomplete"
                      [autoActiveFirstOption]="model.getAdditional('autoActiveFirstOption', AUTOCOMPLETE_OPTIONS['autoActiveFirstOption'])"
                      [disableRipple]="model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)"
                      [displayWith]="model.getAdditional('displayWith', null)"
                      (optionSelected)="onChipSelected($event)">

        <mat-option *ngFor="let option of model.list$ | async" [value]="option">{{ option }}</mat-option>

    </mat-autocomplete>

</mat-chip-list>
` Above code doesn't have to show the validation errors. Following changes should fix the issue.

<mat-error *ngFor="let message of errorMessages">{{ message }}</mat-error>

I can raise a PR for the same.

@padala
Copy link
Author

padala commented Dec 19, 2019

@udos86 Thanks for creating this library and actively maintaining it.
I've raised a PR to fix this issue #1053

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant