我正在将Angle 7与材质设计组件一起使用
我需要将requireMatch验证添加到mat-autocomplete。
我已经使用param创建了自定义验证,但是param的值确实会动态更改。
下面是我的组件代码。
this.stepFormGroup = this.formBuilder.group({
AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
});
////require-match validation for access-code
requireMatch = (accessCodes: string[]) => {
return (control: FormControl) => {
const selection: any = control.value;
console.log("accessCodes", accessCodes, "selection", selection);
if (accessCodes.indexOf(selection)===-1) {
return { requireMatch: true };
}
return null;
}
}
问题是我总是在accessCodes
内的requireMatch
中变空(init)。
this.accessCodeList
的更改不会反映给验证者。
意味着更改this.accessCodeList
后,它不会在requireMatch
验证程序中获得更新的数组。
所以有人对如何在自定义验证器中传递动态参数有任何想法吗?
答案 0 :(得分:2)
像这样调用验证功能时,需要绑定验证功能,否则验证功能将不会绑定输入accessList
[Validators.required, this.requireMatch(this.accessCodeList).bind(this)]
如果您想限制字段中的某些单词,可以在这里https://www.npmjs.com/package/ng4-validation
看看我的npm软件包之一。答案 1 :(得分:2)
要使验证器功能具有控制器中的最新值, 您可以将其作为函数传递,并在需要时进行解析。因此您的验证函数将获取最新或当前值。
下面的代码将为我的答案提供一些见识
// Component
this.stepFormGroup = this.formBuilder.group({
AccessCode: ["", [Validators.required, this.requireMatch(() => this.accessCodeList)]]
});
//Validator Function
requireMatch = (getAccessCodes: (() => string[])) => {
return (control: FormControl) => {
const selection: any = control.value;
const accessCodes = getAccessCodes();
console.log("accessCodes", accessCodes, "selection", selection);
if (accessCodes.indexOf(selection)===-1) {
return { requireMatch: true };
}
return null;
}
}
答案 2 :(得分:1)
根据我的假设,您想将用户输入与带有FormControl的字符串数组进行比较。因此,您可以获得项目的索引,并检查它是否不等于-1
,如:
var index = accessCodes.indexOf(selection);
if (index != -1) { // That means item found in the array
console.log('if')
return { requireMatch: true };
}
else {
// console.log('esle')
return null;
}
TS代码:
import { Component, Inject, OnInit } from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample implements OnInit {
public stepFormGroup: FormGroup;
accessCodeList: any[] = ['Prashant', 'Pimpale'];
constructor(private fb: FormBuilder) {
}
public ngOnInit(): void {
this.stepFormGroup = this.fb.group({
AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
});
}
////require-match validation for access-code
requireMatch = (accessCodes: string[]) => {
return (control: FormControl) => {
const selection: any = control.value;
console.log("accessCodes", accessCodes, "selection", selection);
var index = accessCodes.indexOf(selection);
if (index != -1) {
console.log('if')
return { requireMatch: true };
}
else {
// console.log('else')
return null;
}
return null;
}
}
}
HTML代码:
<input [formControl]="stepFormGroup.get('AccessCode')">