给占位符在Angular 6中选择答案

【问题标题】：Give placeholder to select in Angular 6给占位符在Angular 6中选择
【发布时间】：2019-01-27 14:43: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-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>

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

【问题讨论】：

标签： angular select dropdown

【解决方案1】：

试试下面给出的代码，你必须在代码中添加模板变量并将其分配为值，然后它才能工作。

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

【讨论】：

【解决方案2】：

你可以使用[value]="" selected hidden

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

【讨论】：

我不知道它如何为你工作，但它仍然不适合我
你想做什么？
你添加 css 了吗？
会不会是@RuchitaAjmera的代码中Category没有初始化为空字符串？
@ConnorsFan 它就像魅力一样。它没有初始化，这就是它不起作用的原因。谢谢！！

【解决方案3】：

这对我有用。我使用第一个选项值作为占位符。

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

【讨论】：

【解决方案4】：

由于您使用的是 ngModel，因此默认选择 option 标签的 value 属性和初始 category 值组件类必须相同。要使其隐藏在列表中，您可以使用隐藏属性。对于验证问题的一致性，最好的方法是使用 ngValue 而不是 value。

在组件中：

category: string = null;

在模板中：

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

【讨论】：

【解决方案5】：

只需使用[value]="undefined"

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

【讨论】：

【解决方案6】：

对于模板驱动的角度形式，您可能需要考虑这个demo。你可以找到代码here

对于一个简单的 html 表单，这里是一个 sn-p。

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

【讨论】：

这不是禁用选项的正确方法，它仍然是一个选项。当她询问占位符时。
它可以在没有 [(ngModel)]="Category" 的情况下工作，而不是在它的情况下
使用 [(ngmodel)] 您没有提到名称标签，没有名称标签 ngModel 将无法工作。如果你提到名字标签，你的代码就不会像现在这样工作。
我的错。我刚刚进行了更新，它按预期工作。请检查。

【解决方案7】：

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

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

【讨论】：

我希望当下拉显示时，用户应该知道他们必须选择没有它的类别，他们不应该继续。
您提供的解决方案将允许用户继续进行，因为它被视为未定义的值
@RuchitaAjmera - 否。Category 已经未定义。将该值作为选项不会改变任何内容（除了允许文本出现在选择框中）。当值未定义时，由您决定会发生什么。
它允许我提交带有“选择一个类别”选项的表单。但情况是用户应该选择其中一个选项，然后只有他可以提交。
哦，是的，你是对的。 required 属性在值为空字符串时有效，但不适用于 [ngValue]="undefined"。