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

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

这是一个模板驱动的表单，其中使用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 2

您可以使用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 3

你可以试试这个：

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

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

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

希望，它有帮助。