假设我有以下两个表单控件：
# Text
# 1 The text you see here is fine, no problem with this.
# 2 The text you see here is fine, no problem with this.
# 3 The text you see here is fine, no problem with this. We are now ready to take your questions.
# 4 The text you see here is fine, no problem with this.
# 5 The text you see here is fine, no problem with this.
# 6 The text you see here is fine, no problem with this. We are now at your disposal for questions.
# 7 The text you see here is fine, no problem with this.
# 8 The text you see here is fine, no problem with this.
# 9 The text you see here is fine, no problem with this.
# 10 The text you see here is fine, no problem with this. Transcript of the questions asked and the answers.
# 11 The text you see here is fine, no problem with this.
# 12 The text you see here is fine, no problem with this.
在这里我有this.takenUsername.bind（this）和this.takenEmail.bind（this）：
userName: new FormControl(
null,
Validators.required,
this.takenUsername.bind(this) // add "userName" here
),
email: new FormControl(
null,
[Validators.required, Validators.email],
this.takenEmail.bind(this) // add "email" here
)
没有办法将这两个自定义验证器作为一种方法吗？我尝试过：
takenUsername(control: FormControl): Promise<any> | Observable < any > {
const promise = new Promise<any>((resolve, reject) => {
let text$ = fromEvent(this.userName.nativeElement, "keyup") //this.userName variable with @ViewChild
.pipe(
debounceTime(200),
distinctUntilChanged(),
switchMap(() => this.employeeService.getEmployeeList())
)
.subscribe((employees) => {
const properties = employees.map((employee) => employee.userName);
for (let tempProperty of properties) {
if (tempProperty === control.value) {
resolve({ usernameIsTaken: true });
} else {
resolve(null);
}
}
});
});
return promise;
}
takenEmail(control: FormControl): Promise<any> | Observable < any > {
const promise = new Promise<any>((resolve, reject) => {
let text$ = fromEvent(this.email.nativeElement, "keyup") // this.email is a variable with @ViewChild
.pipe(
debounceTime(200),
distinctUntilChanged(),
switchMap(() => this.employeeService.getEmployeeList())
)
.subscribe((employees) => {
const properties = employees.map((employee) => employee.email);
for (let tempProperty of properties) {
if (tempProperty === control.value) {
resolve({ emailIsTaken: true });
} else {
resolve(null);
}
}
});
});
return promise;
}
然后我做了takenProperty(control: FormControl, property: string): Promise<any> | Observable < any > {
const promise = new Promise<any>((resolve, reject) => {
let text$ = fromEvent(this[property].nativeElement, "keyup")
.pipe(
debounceTime(200),
distinctUntilChanged(),
switchMap(() => this.employeeService.getEmployeeList())
)
.subscribe((employees) => {
const properties = employees.map((employee) => employee[property]); // error here
for (let tempProperty of properties) {
if (tempProperty === control.value) {
resolve({ [`${property}IsTaken`]: true });
} else {
resolve(null);
}
}
});
});
return promise;
}
或“ email”，但是它没有用，因为属性值将保存整个formControl。
因此，我很幸运地发现方法中的control：FormControl参数包含“ userName”或“ email”参数。
通过这种方式，employee [control]会给出一个错误，建议通过强制转换this.takenProperty(this, "userName")来解决。
错误消失了，但是如果我console.log记录了const属性，它会记录[未定义]。
在这一点上，我有什么建议吗？