Set select input value via Angular FromControl value

Question

Can anyone tell me how I can set the initial value of the below select? I have tried doing this through my formControl and although the value in the form will be correct it is not reflected within the view

HTML :

<mat-form-field>
 <mat-select name="animationType" formControlName="animationType" 
  placeholder="select animation">

  <mat-option *ngFor="let type of animationTypes" [value]="type">
   {{type.name}}
  </mat-option>

 </mat-select>
</mat-form-field>

TS :

  animationTypes = [
    { name: 'balloon' },
    { name: 'kite' },
    { name: 'wolf' }
  ];

Sangwin Gawande · Accepted Answer · 2018-05-23 12:19:33Z

1

I see you have used formControlName, So You can set default value directly from TS file like following :

HTML :

<mat-form-field>
    <mat-select name="animationType" formControlName="animationType" placeholder="select animation">
        <mat-option *ngFor="let type of animationTypes" [value]="type">
            {{type.name}}
        </mat-option>
    </mat-select>
    <mat-error *ngIf="poemForm.controls.animationType.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>

TS :

  ngOnInit() {
    this.poemForm.patchValue({ 
      animationType: selectedAnimationType // Selected Value E.g. this.animationTypes[0]
    });
  }

edited May 23, 2018 at 12:19

answered May 23, 2018 at 12:11

Sangwin Gawande

8,2348 gold badges52 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

joeSmith Over a year ago

this updates the formControl value but in the view the select input still displays the placeholder as if it has no value yet and nothing has been selected. What I need is for the select input to display the value that has been set in the formControl,

Sangwin Gawande Over a year ago

You are using [value]="type" as object. So in selectedAnimationType you will need to add object only. Like this.animationTypes[0]

Sangwin Gawande Over a year ago

Or try using [value]="type.value" and use selectedAnimationType = {some string value existing in array object}. I think this is the issue.

joeSmith Over a year ago

neither of these worked, I think you maybe correct that is has something to do with the fact that [value]="type" is an object (i updated the original post with my objects) but I also made selectedAnimationType an object like this { name: "some string" } to match the orginal objects being passed into the ngFor loop but it still did not update the select in the view

joeSmith · Accepted Answer · 2018-05-27 20:40:36Z

0

Seems the only solution I found was to plug an ngModel on the select like so.

<mat-form-field>
 <mat-select name="animationType" formControlName="animationType" 
  placeholder="select animation" [(ngModel)]="selectedAnimType">

  <mat-option *ngFor="let type of animationTypes" [value]="type.name">
   {{type.name}}
  </mat-option>
 </mat-select>
 <mat-error *ngIf="poemForm.controls.animationType.invalid">{{getErrorMessage()} 
 </mat-error>
</mat-form-field>

edited May 27, 2018 at 20:40

answered May 27, 2018 at 11:11

joeSmith

1,6052 gold badges10 silver badges7 bronze badges

Collectives™ on Stack Overflow

Set select input value via Angular FromControl value

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related