Search code examples
htmlangulartypescriptfrontendangular-ngmodel

Remove blank option from select ng-model ANGULAR 8


I would remove the blank first option from a select ng-model and put instead the first value of an array. Here is my code:

 <div class="col-9">
    <select ng-model="chooseOrg"
            formControlName="orgTypeId"
            class="editmodal-object">
            <option [ngValue]="orgType.id" *ngFor="let orgType of allOrgType" style="text-transform:uppercase;">{{orgType.description}}</option>
    </select>
 </div>

My array has no blank value inside, but it's composed of 5 object. I just want the first one always the default value of my select.


Solution

  • Since you are using ngmodel you should have it changed when you change the formControlName. I think having both makes it not working properly. So remove ngmodel and rely on formControlName and check for changes and set chooseOrg that way.

    Another good thing to know is that you can set the default value for new FormControl() by having the default value 1 for example in the method like this:

    new FormControl(1)
    

    I made a stackblitz for you to show you what I mean. https://stackblitz.com/edit/angular-ivy-klwglz?file=src/app/app.component.html