时间戳

首页 > 解决方案 > Angular - 默认情况下在下拉列表中显示空行并禁用按钮

html - Angular - 默认情况下在下拉列表中显示空行并禁用按钮

问题描述

我需要做两件事：

1）我的页面上有一个显示名称列表的下拉列表。目前，它默认在列表顶部显示一个人的姓名（第 5 行）。我想更改它，以便默认情况下它不显示名称，强制用户选择下拉列表中可用的名称。

2）虽然没有从下拉列表中选择名称，但应该禁用发送按钮。仅当用户从下拉列表中选择名称时才应启用它。

<div class="row">
    <div class="col-lg-6" *ngIf="dealer.contacts && dealer.contacts.length" >
        <label>Contact person</label><br>
        <select class="form-control" [ngModel]="survey.answer.contact.email" (ngModelChange)="onContactChange($event)">
            <option *ngFor="let contact of dealer.contacts" [ngValue]="contact.email"> {{contact.title}} {{contact.firstname}} {{contact.lastname}}, {{contact.role}}</option>
        </select>
    </div>
    <div class="col-lg-6" *ngIf="!dealer.contacts || !dealer.contacts.length" >
        <label>Contact person</label><br>
        <span class="label-error">No contacts present, please set up contacts in the Dossier!</span>
    </div>
    <div class="col-lg-4" *ngIf="!survey.answer.emailStatus">
        <label>Date</label><br>
        <acc-datepickermanual id="startDate" [editable]="editable" (dateChange)="onDateChange($event)" [currentDate]="survey.answer.event.start"
                            [parentEndDate]="program.endDate" [parentStartDate]="program.startDate"></acc-datepickermanual>
    </div>
</div>

<div class="col-lg-2">
    <button class="btn btn-primary" [class.survey-button-sent]="sendingStatus == 'Sent'" (click)="sendNotifications($event)"
            [disabled]="sendingStatus !== 'Send'">
        {{sendingStatus}}
    </button>
</div>

标签： htmlangular

解决方案

你可以试试这个：

我添加了选择选项数组的第一个元素作为我的虚拟元素。{name: '---select---',email:'unwanted'}，我用它来处理按钮的可见性。

  1. 默认情况下，在第一次渲染组件时禁用按钮。
  2. 如果下拉列表更改并且需要更改，则启用按钮。
  3. 如果下拉列表更改并且不是必需的更改，则禁用按钮。

查看演示版本：https ://stackblitz.com/edit/angular-fnfobg?file=src/app/app.component.ts

希望能帮助到你。

推荐阅读