Выберите - Пожалуйста, выберите - по умолчанию в раскрывающемся списке внутри формы угловой 4,0 HTML

Question

У меня есть несколько выпадающих меню внутри формы, но я не могу сделать - Пожалуйста, выберите - как выбор по умолчанию для этих выпадающих меню.

Я получаю совершенно простой и пустой выпадающий список.При щелчке мы видим, что элементы были связаны внутри него.

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>

Component.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--" в качестве первого элементасписка из хранимой процедуры.

Answer 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>

Вот вам Рабочий образец StackBlitz для вашей ссылки.