我们正在使用Angular 6材料开发应用程序。我们有一个具有自动完成功能的选择框。我确实需要对我的选择框进行验证,因此,当用户搜索选项时,他/她没有选择任何选项,而是将搜索词保留在选择框内,并且由于只需要对选择框进行验证,因此我的表单就会发布API。我要实现的目标是不允许用户发布表单,除非他/她选择了一个选项而不只是指定搜索词。我该如何实现?
<mat-form-field>
<input matInput placeholder="Pick one" aria-label="pick one" [matAutocomplete]="auto" [formControl]="form.controls['SELECTBOX_VALUE']">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of myOptions | async" [value]="option.name"> <span>{{ option.name }}</span> </mat-option>
</mat-autocomplete>
</mat-form-field>
<small *ngIf="!form.controls['SELECTBOX_VALUE'].valid && form.controls['SELECTBOX_DEGER'].touched" class="mat-text-warn">Please select.</small>
ngOnInit() {
this.form = this.fb.group({
... some other fields
SELECTBOX_VALUE: [null, Validators.required]
});
这是我用于自动补全的过滤器代码,这很简单
this.form.get('SELECTBOX_VALUE').valueChanges
.pipe(
startWith(''),
map(option => secenek ? this.doFilter(option) : this.options.slice())
);
doFilter (name: string) {
return this.myOptions.filter(option =>
option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
答案 0 :(得分:5)
对于那些可能需要类似方法的人。这是我的解决方案。我已经根据自己的需求建立了自定义验证规则。
SELECTBOX_VALUE: [null, Validators.compose(
[Validators.required, FormCustomValidators.valueSelected(this.myArray)]
)]
export class FormCustomValidators {
static valueSelected(myArray: any[]): ValidatorFn {
return (c: AbstractControl): { [key: string]: boolean } | null => {
let selectboxValue = c.value;
let pickedOrNot = myArray.filter(alias => alias.name === selectboxValue);
if (pickedOrNot.length > 0) {
// everything's fine. return no error. therefore it's null.
return null;
} else {
//there's no matching selectboxvalue selected. so return match error.
return { 'match': true };
}
}
}
}
答案 1 :(得分:0)
Angular Material Autocomplete的两种情况可能需要针对所选选项列表进行验证:
displayWith
输入。)** Stackblitz Demo **
要针对字符串选项数组验证autocomplete
,验证器可以接受选项数组并检查是否包含控制值。
function autocompleteStringValidator(validOptions: Array<string>): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (validOptions.indexOf(control.value) !== -1) {
return null /* valid option selected */
}
return { 'invalidAutocompleteString': { value: control.value } }
}
}
验证器可以与其他内置验证器(例如FormControl
)一起添加到Validators.required
:
public autocompleteControl = new FormControl('',
{ validators: [autocompleteStringValidator(this.options), Validators.required] })
要针对一系列对象选项来验证autocomplete
,验证者可以利用以下事实:如果有效的control.value
选项没有string
,那么Object
只会是function autocompleteObjectValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (typeof control.value === 'string') {
return { 'invalidAutocompleteObject': { value: control.value } }
}
return null /* valid option selected */
}
}
被选中。
split
答案 2 :(得分:-3)
您可以在Submit函数上添加对字段的验证检查,
Submit() {
if(this.form.valid) {
// send to API
} else {
// show error
}
}