Angular 反应式表单自定义远程验证

Question

我正在使用 .NET Core Web Api 和 Angular。我正在尝试实现自定义验证以检查标题是否唯一。

我使用验证服务

 uniqueTitleValidator() : ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => { 
  if(control.value === "") {
    return  null;
  }
this.albumService.uniqueTitleValidate(control.value).subscribe((data:boolean)=>this.isExist = data);
return  this.isExist ? { titleAlreadyExists: {value: control.value}} : null;   
};

这里是表单组件

ngOnInit(): void {
this.albumForm  = this.formBuilder.group({
  id: [Guid.EMPTY],
  title: ['', {
    validators: [
      Validators.required,
      Validators.maxLength(15),
      Validators.pattern("^[a-zA-Z0-9\' \'-'_\s]*"),
      this.titleValidator.uniqueTitleValidator()
    ],
    updateOn: 'change'
  },
  ],
  description: ['']
});
if(this.formData){
  this.albumForm.patchValue(this.formData)
}

还有html模板

<form [formGroup] = "albumForm" formnovalidate>
<div class="form-group">
    <label for="title">Title</label>
    <input id="title" type="text" formControlName="title" class="form-control" required/>
    <div *ngIf="title.invalid && (title.dirty || title.touched)"
    class="error">
       <div *ngIf="title.errors?.required">
        Title is required. 
        </div>
        <div *ngIf="title.errors.maxlength">
            Title should be under 15 characters.
        </div>
        <div *ngIf="title.errors?.pattern">
            Only A-Z, a-z, 0-9, ' ', '-', '_' characters are allowed.
        </div>
        <div *ngIf="title.errors?.titleAlreadyExists">
           Album already exists.
        </div>
</div>      
</div>
<div class="form-group">
    <label for="description">Description</label>
    <input id="id" type="text" class="form-control" hidden/>
    <input id="description" type="text" class="form-control" />
</div>
<div class="form-group">
    <input type="button" (click)="onClick($event)" value="Save" [disabled]="!albumForm.valid" class="btn btn-success" />
    <a routerLink="/manage/albums" class="btn btn-danger ml-2">Cancel</a>
</div>

和控制器

 [HttpGet]
    [Route("api/albums/validation")]
    public async Task<IActionResult> CheckTitle(string title)
    {
            var album = await _albumService.GetAlbumByTitleAsync(title);
            if (album != null)
                return Ok(true);
            return Ok(false);
    }

但是我有问题。例如：我在数据库中有专辑，标题为“专辑 1”。 当我在表单上输入无效的“专辑 1”时，它显示表单是有效的。然后我输入有效数据，例如不在数据库中的“专辑 2”显示错误。它看起来像在值更改之前更新表单或类似的东西。

Answer 1

试试这个：

uniqueTitleValidator() : ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => { 
  if(control.value === "") {
    return  null;
  }
this.albumService.uniqueTitleValidate(control.value)
.subscribe((data:boolean)=> {
   if (data) { 
      return {titleAlreadyExists: {value: control.value}}
   } else {
      return null
   }
});

};

但我想最好的做法是使用async validator：