Give placeholder to select in Angular 6

问题

I have a select option in which i want to give placeholder which says "select a category"

<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
        <div class="form-group row">
            <div class="col-xl-4 col-lg-6 col-md-12">
                <fieldset class="form-group">
                    <label for="customSelect">Categories:</label>
                    <select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required>
                        <option value=" ">Select one category </option>                                     
                         <option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
                    </select>
                </fieldset>                                
            </div>
        </div>
        <button type="submit" class="btn btn-raised btn-danger">Save</button>
    </form>

If i remove [ngModel] then it works. If i write

<option value="undefined" selected>Select one category </option>    

then it considers as one of the value. I have to make sure there is place and also it is required to select one of the value

回答1:

You can use [value]="" selected hidden

I have create a demo on Stackblitz

<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
    <div class="form-group row">
        <div class="col-xl-4 col-lg-6 col-md-12">
            <fieldset class="form-group">
                <label for="customSelect">Categories:</label>
                <select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required placeholder="d.ff">
                    <option hidden [value]=""  selected>Select one category </option>
                    <option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
                </select>
            </fieldset>
        </div>
    </div>
    <button type="submit" class="btn btn-raised btn-danger">Save</button>
</form>

回答2:

If you want the first value to be selected when Category is still undefined, you can assign the value undefined to the first option with ngValue:

<option [ngValue]="undefined" hidden>Select one category</option>

回答3:

for a template driven angular form you may want to consider this demo. you can find the code here

for a simple html form here is a snippet.

<form>
    <select required>
        <option value="" disabled selected hidden>Select a value</option>
        <option value="0">option 1</option>
        <option value="1">option 2</option>
    </select>
</form>

<option value="" disabled selected hidden>Select your option</option>

回答4:

Since you're using ngModel, to be selected by default the value attribute of the option tag and the initial category value in the component class must be the same. And to make it hidden in the list you can use hidden attribute. For the consistency of validation issues the best way is to use ngValue instead of value.

in the component:

category: string = null;

in the template:

<option [ngValue]="null" hidden>Select one category </option>

回答5:

This worked for me. I've used the first option value as placeholder.

<div class="form-group">
     <label for="homeType">Example select</label>
     <select class="form-control" id="homeType" ngModel="1" name="homeType" required>
     <option  [disabled]="true" value="1" selected>{{ placeholder.select }}</option>
     <option value="house">House</option>
     <option value="flat">Flat</option>
     <option value="townHouse">Town House</option>
     </select>
</div>

回答6:

Try out your code as given below, you have to add template variable to the code and assign it as the value then it will work.

<select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" #category="ngModel" required>
                    <option value="category" disabled hidden>Select one category </option>                                     
                     <option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
                </select>

回答7:

simply use [value]="undefined"

<select class="form-control" [(ngModel)]="selectedCategory">
    <option [value]="undefined" disabled hidden>Select...</option>
    <option *ngFor="let c of categories">{{c}}</option>
</select>

来源：https://stackoverflow.com/questions/51948197/give-placeholder-to-select-in-angular-6