Как включить ng-select, чтобы пользователь мог выбрать опцию

Question

У меня есть оператор ng-select и я хочу убедиться, что опция в раскрывающемся списке выбрана, прежде чем продолжить, если пользователь не выбрал опцию, должно появиться сообщение, сообщающее пользователю, пожалуйста, выберите опцию.

Я попробовал ответ по следующей ссылке: Угловой выбор нужной опции

Вот ng-select, с которым я работаю:

   <ng-select [items]="mentorSessions"
                       [multiple]="false"
                       [closeOnSelect]="true"
                       [searchable]="true"
                       bindLabel="name"
                       [ngModelOptions]="{standalone: true}"
                       [(ngModel)]="mentorToShareTo">
   </ng-select>

Answer 1

Вы можете использовать FormControl. Прежде всего вам нужно добавить свой ng-select внутри формы, добавить в форму formGroup и в ng-select formControlName. В конце формы отправьте данные формы в файл TS:

 <form [formGroup]="myform" (ngSubmit)="onSubmit(myform)">
   <ng-select formControlName="selector" [items]="mentorSessions"
                   [multiple]="false"
                   [closeOnSelect]="true"
                   [searchable]="true"
                   bindLabel="name"
                   [ngModelOptions]="{standalone: true}"
                   [(ngModel)]="mentorToShareTo">

В файле TS сделайте код ниже, чтобы создать конструктор форм

myform: FormGroup;

constructor(
    private formBuilder: FormBuilder
) { }


ngOnInit() {
     this.myform = this.formBuilder.group({
          selector: ['', Validators.required]
     });                                                                   
}

То, что я написал выше, обычно соответствует вашим потребностям. Если вы хотите получить ввод ng-select в свой файл TS, создайте функцию onSubmit, как показано ниже:

onSubmit(data) {
  //do whatever you want with input data
}

Для получения дополнительной информации, пожалуйста, ответьте мне. =)

Импорт в модуль приложения:

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

В вашем компоненте .ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormControl } from '@angular/forms';