enter image description here

<select  id="ddSelectaTopic" onchange=
                                    "if(this.value==='') {this.style.color='#999'} else {this.style.color='#333'}" [(ngModel)]="user_type_id" (change)="TypeChange($event.target.value,access_id)"  [disabled]="access_id == 1 || !access_id">
                                        <option disabled [value]="null" selected>Choose User Types</option>
                                        <option *ngFor="let type of UserTypes; let i = index" [attr.value]="type.id" [attr.selected]="i == 0 ? true : null">
                                            <span *ngIf="access_id">{{type.name}}</span>
                                        </option>
                                        <option value="newType">New User Type</option>
                                    </select>

I try changing the disabled value null selected but it's not displaying the "Choose User Types"

CodePudding user response：

If you want to bind a value of null to a select option, use [ngValue]="null". By using [value]="null", Angular will always bind the value as a string. So when the comparison is done you get a string value compared to null which is always false. This is probably why your option is not being selected.

<option disabled [ngValue]="0" selected>Choose User Types</option>
<option *ngFor="let type of UserTypes; let i = index" [ngValue]="type.id">
  <span>{{type.name}}</span>
</option>

• https://upmostly.com/angular/using-value-vs-ngvalue-in-angular

CodePudding user response：

Use this value="" instead of [value]="null" to display the "Choose User Types"

<select  id="ddSelectaTopic"
    onchange="if(this.value==='') {this.style.color='#999'} else {this.style.color='#333'}" [(ngModel)]="user_type_id"
    (change)="TypeChange($event.target.value,access_id)" [disabled]="access_id == 1 || !access_id">
    <option disabled value="" selected>Choose User Types</option>
    <option *ngFor="let type of UserTypes; let i = index" [attr.value]="type.id" [attr.selected]="i == 0 ? true : null">
        <span *ngIf="access_id">{{type.name}}</span>
    </option>
    <option value="newType">New User Type</option>
</select>