Angular响应式表单新增标签时校验名称唯一性并提交数据库的问题

Hey there! Let's get your tag duplication validation working smoothly for your reactive form. Since you need to check against a database via your httpServices, this requires an async validator—here's a step-by-step fix and enhancement for your code:

Step 1: Adjust Your Form Control Setup #

First, let's correct the form control configuration. Async validators need to be placed in a separate array (the third parameter of the form control setup), distinct from sync validators:

this.myForm = this.fb.group({
  name: [...], // Keep your existing validators for the name field
  email: [...], // Keep your existing validators for the email field
  tag: ['', [], [this.tagDuplicationValidator(this.httpServices)]] 
  // Empty sync validators array, followed by async validators array
});

Step 2: Build the Async Validator Factory #

Your validation logic needs to be a factory function that returns an AsyncValidatorFn—this lets us properly inject your httpServices and handle the async database check:

tagDuplicationValidator(httpService: Services): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    // Return no error if the tag input is empty
    if (!control.value?.trim()) {
      return of(null);
    }

    // Call your API endpoint to check if the tag already exists
    return httpService.checkTagExists(control.value.trim()).pipe(
      map((tagExists: boolean) => {
        // Return the error object if tag is repeated, else null
        return tagExists ? { tagRepeated: 'tag is repeated' } : null;
      }),
      catchError(() => {
        // Gracefully handle API errors (return null to avoid blocking form submission)
        return of(null);
      })
    );
  };
}

Quick Notes on This Implementation: #

• Factory Function: We use a factory to pass in httpServices because validators can't inject dependencies directly without this pattern.
• Async Handling: The validator returns an Observable since we're making an HTTP call to your database.
• Debounce Option (Optional): To avoid hitting your server on every keystroke, add a debounceTime operator to the pipe:

  return httpService.checkTagExists(control.value.trim()).pipe(
    debounceTime(300), // Wait 300ms after the last keystroke before calling the API
    map(...),
    catchError(...)
  );
  

Step 3: Display the Error in Your Template #

Finally, add code to show the error message when validation fails. In your template, add this below the tag input:

<div class="form-group">
  <label for="tag">Tag</label>
  <input type="text" formControlName="tag" id="tag">
  <div *ngIf="myForm.get('tag')?.hasError('tagRepeated') && myForm.get('tag')?.touched">
    {{ myForm.get('tag')?.getError('tagRepeated') }}
  </div>
</div>

We check if the control is touched to avoid showing the error immediately when the page loads—this gives users a chance to input their tag first.

内容的提问来源于stack exchange，提问作者userx