Установить значение по умолчанию выпадающего в Angular 6

Question

Я заполняю DropDown, используя сервис.Сервис возвращает простой массив пары ключ / значение.

Машинопись:

public initializeForm(): void {
        this.form = this.fb.group({
            supplierId: ["", [Validators.required]],
            username: ["", Validators.required],
            credentials: ["", [Validators.required]],
            rating: [""]
        })
    }


this.adminService.getSuppliers({ active: "true" }).subscribe(res => {
    this.suppliers = res;
})

HTML:

<select class="form-control" formControlName="supplierId">
     <option>Select Supplier</option>
     <option *ngFor="let s of suppliers" [value]="s.supplierId">{{s.supplierName}}</option>
</select>

Как видно на изображении ниже, опция по умолчанию не установлена ​​как выбранная опция при загрузке страницы.Я хочу, чтобы при загрузке страницы была выбрана опция по умолчанию, такая же, как в простом HTML, и запускается обязательная проверка поля, когда я пытаюсь отправить страницу, выбрав опцию по умолчанию в раскрывающемся списке

ОБНОВЛЕНО:
Если я установлю значение параметра по умолчанию равным 0, оно не будет поддерживать требуемую проверку и будет считаться действительным, если я выберу параметр по умолчанию

Answer 1

Установите validation.min с необходимыми значениями, как показано ниже.

supplierId: ["", [Validators.required, Validators.min(1)]]

supplierId всегда больше нуля, поэтому min (1) работает для вас.

Answer 2

Вам необходимо установить значение от formControlName

, вот пример

this.myFormGroup.setValue({
  supplierId: myValue1, 
});

Answer 3

Включите приведенный ниже код в ваш файл component.html

  <option [value] = "defaultValue">0:(optional_value)</option>

Включите приведенный ниже код в ваш файл component.ts.

this.myFormGroup.setValue({
supplierId: defaultValue, 
});

Answer 4

Попробуй это, сработало для меня.

<select class="form-control" formControlName="supplierId">
  <option [ngValue]="selected" selected disabled>Select Supplier</option>
 <option *ngFor="llet s of suppliers" [ngValue]="s.supplierId">{{s.supplierName}} 
</option>    

Answer 5

Вы можете установить его с помощью setValue

ngOnInit(){
   let defaultId = 1;
   this.yourForm.controls['supplierId'].setValue(defaultId);
}

Answer 6

Значение по умолчанию может быть равно 0 для параметра по умолчанию. (0 это просто пример, вы можете иметь любое значение по умолчанию)

<option value="0">Select Supplier</option>

Когда вы создаете элемент управления формы для выпадающего списка, инициализируйте его значением по умолчанию.

// wharever your form name is, this is just an example
this.form = this._formBuilder.group({  
    .....
    supplierId: [0]  // initialize the control with the default value
    ....
})