当下拉列表中未选择任何内容时，Angular 9禁用按钮

我试图在没有选择下拉列表的情况下启用/禁用Angular 9中的按钮

dashboard.html.ts：

<div class="form-group">
     <label for="inputCollaborateur">Collaborateur</label>
     <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" required>
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
     </select>
</div>

<button type="button" class="btn btn-primary" (click)="enregistrerCreation()">Ajouter</button>

我尝试在按钮代码ng disabled=中使用此选项！edit.collaborative但不起作用…

请尝试：

<button type="button" class="btn btn-primary" [disabled]="!edit.collaborateur" (click)="enregistrerCreation()">Ajouter</button>

它对您有用吗？

请尝试：

<button type="button" class="btn btn-primary" [disabled]="!edit.collaborateur" (click)="enregistrerCreation()">Ajouter</button>

---

它对您有用吗？

在选择元素上添加模板引用变量，并按如下方式分配ngControl。 然后使用模板引用变量检查输入的有效性

 <div class="form-group">
        <label for="inputCollaborateur">Collaborateur</label>
        <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" required #collaboreurRef="ngModel">
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
        </select>
  </div>

<button type="button" class="btn btn-primary" [disabled]="collaboreurRef.invalid" (click)="enregistrerCreation()" >Ajouter</button>

---

在select元素上添加模板引用变量，并按如下方式分配ngControl。 然后使用模板引用变量检查输入的有效性

 <div class="form-group">
        <label for="inputCollaborateur">Collaborateur</label>
        <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" required #collaboreurRef="ngModel">
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
        </select>
  </div>

<button type="button" class="btn btn-primary" [disabled]="collaboreurRef.invalid" (click)="enregistrerCreation()" >Ajouter</button>

试试这个：

<button type="button" class="btn btn-primary" [disabled]="(!edit.collaborateur || edit.collaborateur === '' )" 
 (click)="enregistrerCreation()">Ajouter</button>

试试这个：

<button type="button" class="btn btn-primary" [disabled]="(!edit.collaborateur || edit.collaborateur === '' )" 
 (click)="enregistrerCreation()">Ajouter</button>

---

我建议只需勾选标签即可。对于这种情况，可以使用更改事件处理程序

<div class="form-group">
     <label for="inputCollaborateur">Collaborateur</label>
     <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" (change)="check_for_disable()" required>
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
     </select>
</div>

<button type="button" class="btn btn-primary" (click)="enregistrerCreation()" [disabled]="disabled">Ajouter</button>

---

我建议只需勾选标签即可。对于这种情况，可以使用更改事件处理程序

<div class="form-group">
     <label for="inputCollaborateur">Collaborateur</label>
     <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" (change)="check_for_disable()" required>
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
     </select>
</div>

<button type="button" class="btn btn-primary" (click)="enregistrerCreation()" [disabled]="disabled">Ajouter</button>

---

---

它不工作，它没有禁用按钮…我想，但与所有的东西和代码，我在文件中，我从来没有创建一个复杂的…我在这个stackblitz尝试了它的工作很好：这是我的，但很多错误，由于图书馆我不能与你一起工作，因为你把一个函数比较。如果我删除它，它就不起作用了。它不起作用，它不会禁用按钮…我想，但我在文件中的所有东西和代码都很复杂，我从来没有创建过一个…我在这个stackblitz中尝试过，它工作得很好：这是我的，但由于库的原因，有很多错误我无法与你一起工作，因为你放了一个函数compareFn。如果我删除它，它就不起作用了。或者你可以尝试用html中的ngModelChange=onChange$事件检查数据，然后检查TS文件中的启用/禁用。你有没有“ngModelChange=onChange$事件”的示例？我想你在代码的其他地方遇到了问题，因为其中一个方法必须工作。你有这些代码的例子吗？也试试这个[disabled]=collaboreurRef.invalid | |！edit.collabour | | edit.collabour==否则，如果所有数据都正确到达，您应该检查代码。祝你好运或者您可以尝试使用html中的ngModelChange=onChange$事件检查数据，然后检查TS文件中的启用/禁用是否有“ngModelChange=onChange$事件”的示例？我认为代码中的其他地方存在问题，因为其中一个方法必须工作。你有这些代码的例子吗？也试试这个[disabled]=collaboreurRef.invalid | |！edit.collabour | | edit.collabour==否则，如果所有数据都正确到达，您应该检查代码。祝你好运如果未选择，您的意思是下拉列表显示Collabours的第一个值吗？如果未选择，您的意思是下拉列表显示Collabours的第一个值吗？