自定义验证器使用Aditional参数

Question

目前，我已经尝试了代码Bellow，但我还没有使用额外的数据。

create-room.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DialogData } from '../game.component';

@Component({
  selector: 'app-create-room',
  templateUrl: './create-room.component.html',
  styleUrls: ['./create-room.component.scss']
})
export class CreateRoomComponent implements OnInit {
  form!: FormGroup;
  
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData, private _formBuilder: FormBuilder, private dialogRef: MatDialogRef<CreateRoomComponent>) { }

  ngOnInit(): void {
    this.form = this._formBuilder.group({
      roomInput: new FormControl("", [Validators.required]),
    }, {validator: roomValidator}); 
  }
  
  ...
}

export const roomValidator: ValidatorFn = (formGroup: AbstractControl ): ValidationErrors | null  => {
  /* Check if the room name already exists */
  var roomName: string = formGroup.get('roomInput')?.value;

  // use data from MAT_DIALOG_DATA INJECT here

  if (true) {
    return { nameWrong: true };
  }

  return null;
}

如何使用对话框在自定义验证器中接收的数据。

我应该将this.data作为参数吗？

Answer 1

将验证器定义更改为一个函数，该函数接受您需要的任何参数，并返回 ValidatorFn ：

export const roomValidator = (data: DialogData): ValidatorFn => {
  return (formGroup: AbstractControl ): ValidationErrors | null  => {
    /* Check if the room name already exists */
    var roomName: string = formGroup.get('roomInput')?.value;

    // use data param

    if (true) {
      return { nameWrong: true };
    }

    return null;
  }
}

然后像这样使用它：

  ngOnInit(): void {
    this.form = this._formBuilder.group({
      roomInput: new FormControl("", [Validators.required]),
    }, {validator: roomValidator(this.data)}); 
  }

Answer 2

您有多种选择：

• 将 data 作为参数传递给验证器
• 添加 NG_VALUE_ACCESSOR 并实现 ControlValueAccessor NG_VALUE_ACCESSOR创建自定义表单组验证