给占位符选择Angular 6

发布时间：2020-12-17 17:47:33 所属栏目：安全来源：网络整理

导读：我有一个选择选项,我想给占位符说“选择一个类别” 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-g

我有一个选择选项,我想给占位符说“选择一个类别”

<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>

如果我删除[ngModel]然后它的工作原理.如果我写

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

然后它认为是价值之一.我必须确保有位置,并且还需要选择其中一个值

解决方法

您可以使用[value] =“”选择隐藏

我在Stackblitz上创建了一个demo

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!