Question

我需要做两件事：

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>

Answer 1

您可以使用html5的表单验证来声明该元素为required，并将empty选项设置为默认值，从而将表单强制为无效状态。

要在无效状态下禁用按钮，您可以选择

<button type="submit" [disabled] = "formName.invalid"></button>

类似这样的东西：

 <select class="form-control" [ngModel]="survey.answer.contact.email" (ngModelChange)="onContactChange($event)" required>
      <option selected="" value="">-- Select Name -- </option> <!-- Select it as default but with empty value. -->
        <option *ngFor="let contact of dealer.contacts" [ngValue]="contact.email"> {{contact.title}} {{contact.firstname}} {{contact.lastname}}, {{contact.role}}</option>
    </select>

Answer 2

这是模板驱动的表单，其中使用ngForm，并且只有在表单的所有输入均有效时，提交按钮才可以单击，否则它将被禁用。

 <form name="contactForm" id="contactForm" novalidate method="post"  (ngSubmit)="contactForm($event)" #contactForm="ngForm"
     (ngSubmit)="sendNotifications($event)" >
        <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" name="email" id="email" #email="ngModel">
                    <option value="">Please select name</option>
                    <option *ngFor="let contact of dealer.contacts" [ngValue]="contact.email"> {{contact.title}} {{contact.firstname}} {{contact.lastname}}, {{contact.role}}</option>
                </select>
            </div>
        </div>
        <div class="col-lg-2">
            <button class="btn btn-primary" type="submit"
                    [disabled]="contactForm.form.invalid">
                Submit
            </button>
        </div>
    </form>

Answer 3

您可以尝试以下方法：

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

默认情况下，使在组件首次渲染时禁用按钮。
如果下拉菜单更改并且需要更改，则使按钮启用。
如果下拉菜单更改（如果不是必需的更改），则使按钮禁用。

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

希望，它会有所帮助。

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

3 个答案: