将预定义的验证器名称配置数组传递给表单组件

Question

我正在尝试在Angular中创建一个动态表单 4.每个字段将使用一个独立的组件，并且需要传递配置数据，包括验证器列表，所有预先设置的服务器端.

我正在努力设置验证。例如，我有这个：

  ngOnInit(){

this.detailsForm = this.formBuilder.group({
  exampleField: ['', Validators.compose([
    Validators.required,
    Validators.maxLength(32),
    Validators.minLength(10)
  ])]
});
}

不是像这样将验证器 'hard coding' 放入我的组件中，而是如何从配置对象中设置它们，例如：

fieldData = {
  exampleField: {
    value: 'default value!',
    validators: ['required', 'minLength:10']
  }
}

编辑：

感谢 Amal 的回答。经过讨论，这是我的组件中的完整代码，不幸的是它仍然产生错误 Supplied parameters do not match any signature of call target.:

import { Component, Input, Output, EventEmitter, Injector, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { EntryService } from '../../_services/entry.service';

@Component({
  selector: 'app-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.scss']
})
export class TextInputComponent implements OnInit {

  @Input() id: number;
  @Input() field_name: string;
  @Input() label: string;
  @Input() value: string;

  public fieldData;
  public detailsForm: FormGroup;

  constructor(
      private injector: Injector,
      public _entryService: EntryService,
      private formBuilder: FormBuilder,
    ) {
    this.id = this.injector.get('id');
    this.field_name = this.injector.get('field_name');
    this.label = this.injector.get('label');
    this.value = this.injector.get('value');
  }

  populateValidatorsList(valObj): any[] {
    const list = [];
    if (valObj['pattern']) { list.push(Validators.pattern(valObj['pattern'])); }
    if (valObj['maxLength']) { list.push(Validators.maxLength(valObj['maxLength'])); }
    if (valObj['minLength']) { list.push(Validators.minLength(valObj['minLength'])); }
    if (valObj['required']) { list.push(Validators.required); }
    return list;
  }

  ngOnInit(){

    this.fieldData = {
      exampleField: {
        value: 'default value!',
        validators: {
          required: true,
          minLength: 10,
          pattern: /I_NEED_PATTERN_CHECK/,
          maxLength: null
        }
      }
    }

    this.detailsForm = this.formBuilder.group({
      exampleField: [this.fieldData['exampleField']['value'], this.populateValidatorsList()]
  // exampleField: [this.fieldData['exampleField']['value'], [...this.populateValidatorsList()]]   // BOTH OF THESE ALSO 
  // exampleField: [this.fieldData['exampleField']['value'], [this.populateValidatorsList()]]      // PRODUCE THE SAME ERROR!
    });

}

Answer 1

如果您将配置对象稍微修改成这样，

fieldData = {
  exampleField: {
    value: 'default value!',
    validators: {
     required: true,
     minLength: 10,
     pattern: /I_NEED_PATTERN_CHECK/,
     minLength: null
    }
  }
}

然后在您的组件中有一个方法从配置对象中处理此 validators 属性。

populateValidatorsList(valObj): any[] {
 const list = [];
 if (valObj['pattern']) { list.push(Validators.pattern(valObj['pattern'])); }
 if (valObj['maxLength']) { list.push(Validators.maxLength(valObj['maxLength'])); }
 if (valObj['minLength']) { list.push(Validators.minLength(valObj['minLength'])); }
 if (valObj['required']) { list.push(Validators.required); }
 return list;
}

ngOnInit() {
 this.detailsForm = this.formBuilder.group({
  exampleField: [this.fieldData['exampleField']['value'], [...this.populateValidatorsList(this.fieldData['exampleField']['validators'])]]
 });
}

您甚至可以使用这种方式添加自定义验证。只需创建另一个 .ts 文件（如 validations.ts）并使其包含所有自定义验证 functions。它不是 class，只是一组 exported 函数组合在一起，遵循自定义验证函数 rules。然后你可以在 config.validators 中有另一个属性，比如

validators: {
 required: true,
 minLength: 10,
 pattern: /I_NEED_PATTERN_CHECK/,
 minLength: null,
 custVal: 'custCheckForFoo'
}

validators.ts

export function custCheckForFoo(c: AbstractControl) { 
 // validation check 
 // return null or errors object
}

在你的组件中导入这个函数，

import * as fromValidators from '../validators'

在您的 populateValidatorsList() 中使用它作为附加检查，

if (valObj['custVal']) { list.push(fromValidators[valObj['custVal']]); }

将预定义的验证器名称配置数组传递给表单组件

Pass a pre-defined config array of validator names to a form component

angular

validation

angular-forms