我有以下代码:
HTML:
<div [class]="new_workflow_row_class" id="new_workflow_row">
<div class="col-sm-6">
<label class="checkmark-container" i18n>New Workflow
<input type="checkbox" id="new-workflow" name="new-workflow" [(ngModel)]="new_checkbox" (click)="uncheckBox($event, 'edit')">
<span class="checkmark" id="new-workflow-checkmark" [class]="checkmark_class"><span id="new-workflow-checkmark-content"></span>{{checkmark_content}}</span>
</label>
<input type="text" *ngIf="new_checkbox" id="new_workflow_name" name="new_workflow_name" (keyup)="clearWorkflowError(true)" [(ngModel)]="new_workflow" placeholder="Enter Workflow Name">
<p [hidden]="!show_workflow_error && !workflowForm.errors" class="workflow-error" i18n>The workflow name already exists. Please use a different name.</p>
</div>
</div>
组件.ts:
duplicateWorkflowValidator(control: FormControl) {
console.log("this validator was called!");
clearTimeout(this.workflowTimeout);
return new Promise((resolve, reject) => {
if (this.new_workflow != '') {
this.workflowTimeout = setTimeout(() => {
this
.requestService
.findWorkflow(control.value)
.subscribe((results: any) => {
let data: any = results.data;
if (data.duplicate) {
resolve({ duplicateWorkflow: { value: control.value}})
}
else if (results.status == "OK") {
resolve(null);
}
})
;
}, 500);
}
else {
resolve(null);
}
})
}
component.ts 的内部构造函数:
this.workflowForm = new FormGroup({
name: new FormControl(this.new_workflow, [
Validators.required,
], this.duplicateWorkflowValidator.bind(this))
});
我正在尝试将此异步验证器绑定(bind)到响应式(Reactive)表单,但它不起作用。我想在工作流表单中使用重复的工作流验证器,并让它在发现重复的工作流时触发错误消息。
如何 a) 将验证器正确绑定(bind)到响应式(Reactive)表单,b) 访问验证器错误?预先感谢,希望这是有道理的。
最佳答案
您正在将模板表单与响应式(Reactive)表单混合在一起。选择一种方法。在下面的示例中,我使用响应式(Reactive)形式。
尝试这个简化版本。为了演示目的,当我输入 test
时,验证器将失败,但当我输入其他任何内容时,验证器将成功。您需要将其更改为您的服务电话。
https://angular-sjqjwh.stackblitz.io
模板:
<form [formGroup]="myForm">
<div>
<div>
<input type="text" formControlName="name">
<div *ngIf="myForm.controls.name.hasError('duplicateWorkflow')">
Workflow already exists!
</div>
{{ myForm.controls.name.hasError('duplicateWorkflow') | json }}
</div>
</div>
</form>
组件
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators, Form, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
workflowTimeout: number = 0;
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: new FormControl('',
[Validators.required],
this.duplicateWorkflowValidator.bind(this))
});
}
duplicateWorkflowValidator(control: FormControl) {
console.log("this validator was called!");
return new Promise((resolve, reject) => {
if (control.value === 'test') {
this.workflowTimeout = setTimeout(() => {
resolve({ duplicateWorkflow: { value: control.value } })
}, 500);
}
else {
resolve(null);
}
});
}
}
关于javascript - Angular 4 - 使用异步自定义验证器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47644992/