选择 -- 请选择 -- 作为 angular 4.0 html 表单中下拉列表的默认值

Posted 2023-03-25

【中文标题】选择 -- 请选择 -- 作为 angular 4.0 html 表单中下拉列表的默认值

【英文标题】：Select --Please Select-- as default of a dropdown inside a form angular 4.0 html

【发布时间】：2019-06-27 22:02:00

【问题描述】：

我在一个表单中有多个下拉菜单，但是我无法将 --Please Select-- 作为这些下拉菜单的默认选择。

我得到了完全简单和空白的下拉菜单。点击后我们可以看到里面已经绑定了物品。

html

<form novalidate (ngSubmit)="onSubmit(projectinformationFrm)" [formGroup]="projectinformationFrm">
    <select [(ngModel)]="selectedOrganization" placeholder="Organization" formControlName="OrganizationId" (change)="onSelectOrgEdit($event.target.value)" class="form-control">

        <option *ngFor="let org of OrganizationList" [ngValue]="org .OrganizationId" [selected]="org.OrganizationId==selectedOrganization">
         org .OrganizationName 
        </option>
    </select>

    <div>
        <a class="btn btn-default" (click)="modal.dismiss()"><span class="glyphicon glyphicon-remove"></span>Cancel</a>
        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Save</button>
    </div>

</form>

组件.ts

public selectedOrganization: number=0;


LoadListforProjectManager(): void 
    try 

        this._service.get(URL)
            .subscribe(data =>  this.OrganizationList = data; ,
                error => this.msg = <any>error);
    
    catch (e) 
        this._errorLogService.LogError(e);
    

我还将0,"--Please Select--" 作为存储过程列表的第一项。

【参考方案1】：

不要将列表中的第一项作为请选择，而是在组件模板中创建它。也不要将[(ngModel)] 与 ReactiveForms 方法一起使用。像这样的：

<form novalidate (ngSubmit)="onSubmit(projectinformationFrm)" [formGroup]="projectinformationFrm">
    <select placeholder="Organization" formControlName="OrganizationId" (change)="onSelectOrgEdit($event.target.value)" class="form-control">

    <option value="null" disabled>Please select</option>

    <option *ngFor="let org of OrganizationList" [ngValue]="org .OrganizationId" [selected]="org.OrganizationId==selectedOrganization">
       org .OrganizationName 
    </option>
  </select>

  <div>
    <a class="btn btn-default" (click)="modal.dismiss()"><span class="glyphicon glyphicon-remove"></span>Cancel</a>
    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Save</button>
  </div>

</form>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

让我验证一下