question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Changes made to formControl associated with md-select are not visible

See original GitHub issue

Bug, feature request, or proposal:

Changes made to formControl associated with md-select are not visible

What is the expected behavior?

Changes made to formControl associated with md-select should be visible on select

What is the current behavior?

Event if formControl has the correct value, md-select shows just placeholder. Setting value using md-select dropdown works just fine

<div class="option-select-container" [formGroup]="parentFormGroup">
  <md-select class="option-select"
             placeholder="{{formControlName | capitalize}}"
             (formControl)="formControl"
             formControlName="{{formControlName}}"
             [multiple]="multiple">
    <div class="dropdown-container">
      <div class="select-options" >
        <md-option class="empty-option" [disabled]="multiple">
          <div *ngIf="multiple" class="empty-option-hack">
            <div class="empty-option-hack-block"></div>
          </div>
          <span [ngClass]="{'option-text-hack' : multiple}">{{formControlName | capitalize}}</span>
        </md-option>
        <md-option *ngFor="let option of options" [value]="option">
          <div class="option">
            <label for="file-input" class="option-image-container" (click)="chooseOptionToAppendImage($event, option)" *ngIf="withImage">
              <div class="option-image" [ngStyle]="option.image && option.image && {'background-image': 'url(' + option.image.URL + ')', 'background-size':'cover'} || {}"></div>
            </label>
            <span class="option-text">
              <p>{{option.name}}</p>
            </span>
          </div>
        </md-option>
      </div>
      <form (submit)="addOption($event)" class="select-new-option">
        <md-input-container class="option-creation-input">
          <input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="newOption" mdInput placeholder="New option">
        </md-input-container>
        <button md-raised-button color="primary" type="submit">add</button>
      </form>
    </div>
  </md-select>
</div>

<input id="file-input" accept="image/*" (change)="addImage($event)" type="file" [hidden]="true" *ngIf="withImage">
ngOnInit() {
    this.route.params.subscribe((params) => {
      if (params.id) {
        this.objectId = params.id;
        this.objectService.fetch(params.id).subscribe((data: any) => {
          this.objectCreationForm.setValue({
            language: data.language || '',
            country: data.country || '',
            regions: data.regions || '',
            text: data.text || ''
          });
        });
      }
    });
}

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested on few newest versions of Angular and Material

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
julianobrasilcommented, Aug 11, 2017

So this was a matter of comparing references instead of values?

0reactions
angular-automatic-lock-bot[bot]commented, Sep 8, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[BUG] Changes made to formControl associated with md ...
Bug, feature request, or proposal: Changes made to formControl associated with md-select are not visible What is the expected behavior?
Read more >
material md-select with reactive formcontrol is not updating ...
Formcontrol for input values are working but for md-select value is not binding. ... When an formControl's value is changed to undefined, ...
Read more >
The Ultimate Guide To Angular Reactive Forms - Briebug Blog
The first step to using Reactive forms is to import the ... FormControls: Are the individual controls of a form that keep track...
Read more >
Exploring the difference between disabling a form control ...
Having parts of a form disabled is a common requirement for any large application. Sometimes users must be prevented from interacting with a...
Read more >
reactive_forms | Flutter Package - Pub.dev
Touching a control; Overriding Reactive Widgets show errors behavior ... If at least one FormControl is invalid then the FormGroup is invalid.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found