Question

我有一个ng-select语句，想要确保在下拉列表中选择一个选项，然后再继续操作（如果用户未选择某个选项），则会出现一条消息，告诉用户请选择一个选项。

我尝试了以下链接中的答案：Angular ng select required option

这是我正在使用的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';

在您的component.ts

中

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

Answer 2

required attribute中没有内置ng-select。我总是通过form验证来验证它。
在angular2或更高版本中，可以将ng-select与ngNativeValidate指令一起用于模板驱动的表单。

<form #registerUser="ngForm" ngNativeValidate (ngSubmit)="onSubmit()">  

   <ng-select
    class="col-md-8 required"
    [items]="options" 
    bindLabel="label" 
    bindValue="value"
    [multiple]="true" 
    name="skills"
    placeholder="Select Skills" 
    [(ngModel)]="registerUserData.skills"                                       
    required>
</ng-select>
<div *ngIf="!registerUserData.skills" class="invalid-feedback">
    Skills are required
</div>

<button type='submit' [disabled]="!registerUser.valid" [isFormValid]="!registerUser.valid">Submit</button>

</form>

当style或untouched和touched时，我还使用自定义invalid来标记字段。您可以将其放在全局scss或css文件中，以与所有component相同。

SCSS：

ng-select.required.ng-invalid.ng-touched {
    .ng-select-container{
        border-color: #dc3545;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
    }
}
ng-select.required.ng-invalid.ng-untouched {
    .ng-select-container{
        border-color: #dc3545;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
    }
}

CSS：

ng-select.required.ng-invalid.ng-touched .ng-select-container{
 
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}
ng-select.required.ng-invalid.ng-untouched .ng-select-container {

    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}

希望有帮助！

如何使ng-select成为必需，以便用户必须选择一个选项

2 个答案: