Автовыбор значения в выпадающем списке

Question

Как установить значение в качестве выбранного по умолчанию значения в раскрывающемся списке? Я использую angular 8. У меня есть следующее html

<div class="form-group">
        <label class="form-control-label col-form-label-sm">Content Type</label>
        <select class="form-control form-control-sm" [(ngModel)]="item.contentType"  formControlName="contentType" name="contentType">
          <option   *ngFor="let contentType of contentTypes" [value]="contentType.name" >{{contentType.displayName}}</option>
        </select>
      </div>

Я пытался использовать [selected]="contentType.name=='TEXT'", но в раскрывающемся списке по умолчанию не отображается выбранное значение как «Только текст».

<div class="form-group">
        <label class="form-control-label col-form-label-sm">Content Type</label>
        <select class="form-control form-control-sm" [(ngModel)]="item.contentType" formControlName="contentType" name="contentType">
          <option *ngFor="let contentType of contentTypes" [value]="contentType.name" [selected]="contentType.name=='TEXT'">{{contentType.displayName}}</option>
        </select>
      </div>

contentTypes - это массив [{"name":"TEXT","displayName":"Text Only"},{"name":"AUDIO","displayName":"Audio"},{"name":"VIDEO","displayName":"Video"}]

Answer 1

Karu,

по умолчанию item.contentType должен начинаться со значения coresponding с некоторым параметром из вашего списка contentTypes. Например, если вы инициализируете item.contentType со значением TEXT, опция со значением TEXT будет предварительно выбрана по умолчанию.

Или вы можете просто указать option со значением null с текстом Select content (например). И подтвердите это, если это потребуется. Что-то вроде:

<div class="form-group">
   <label class="form-control-label col-form-label-sm">Content Type</label>
   <select class="form-control form-control-sm" [(ngModel)]="item.contentType"
         name="contentType">
      <option [value]="null">Select content</option>
      <option *ngFor="let contentType of contentTypes" [value]="contentType.name"> 
          {{contentType.displayName}}
      </option>
    </select> 
</div>

В любом случае, выберите, какой подход для построения формы вы будете использовать ( Реактивные формы или Шаблонно-управляемые формы ). Потому что вы сделали ошибку в определении для выбранного компонента. Используйте только определение [(ngModel)] и удалите formControlName="contentType", если вы хотите использовать шаблон формы на основе шаблона. Изучите это сначала в предоставленной ссылке.

Answer 2

Я мог бы заставить это работать на этом примере

шаблон

<div class="form-group">
   <label class="form-control-label col-form-label-sm">Content Type</label>
   <select class="form-control form-control-sm" formControlName="contentType" 
         name="contentType">
      <option *ngFor="let contentType of contentTypes" [value]="contentType.name"> 
          {{contentType.displayName}}
      </option>
    </select> 
</div>

в тс

// if you will give the value to the contentType control it will be selected item
// something like this 
export class ReleaseComponent implements OnInit {

   ngOnInit() {
      this.yourForm.get('contentType').patchValue('TEXT'); 
      // or
      this.yourForm.get('contentType').patchValue(this.contentTypes[0].name); 
   }
}

Я надеюсь, что это может быть полезным