Give placeholder to select in Angular 6

Question

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

Answer 1

如果您希望在Category仍然undefined时选择第一个值，您可以使用ngValue将undefined值分配给第一个选项：

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

Answer 2

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>

Answer 3

for a template driven angular form you may want to consider thisdemo . 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>

Answer 4

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>

Answer 5

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>

Answer 6

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>

Answer 7

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>