代码之家 › 专栏 › 技术社区 › Inigo

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

angular-forms validation angular

Inigo · 技术社区 · 7 年前

我正在努力设置验证。例如,我有:

  ngOnInit(){

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

与其像这样将验证器“硬编码”到我的组件中,我如何从配置对象设置它们,例如:

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

谢谢你的回答。在讨论之后,这里是我的组件中的完整代码,不幸的是,它仍然会产生错误 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!
    });

}

1 回复 | 直到 7 年前

amal 7 年前

如果您稍微将config对象修改为这样的内容,

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 export ed函数按照自定义验证函数分组在一起 rules

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

验证器。输电系统

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']]); }