폼 구성 요소에 미리 정의 된 유효성 검사기 배열 배열을 전달합니다.

Question

각형으로 동적 폼을 만들려고합니다. 각 필드는 독립 구성 요소를 사용하며 유효성 검사기 목록을 포함하여 구성 데이터를 전달해야합니다 , 모든 사전 설정된 서버 측.

나는 유효성 검사를 설정하는 데 어려움을 겪고 있습니다. 예를 들어,이 있습니다

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

편집 :

당신의 대답에 감사드립니다.

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

그 다음에 당신은 약간 이런 일에 설정 객체를 수정하는 경우

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

: 토론 후, 여기에 여전히 불행하게도 오류 Supplied parameters do not match any signature of call target.을 생산하고 내 구성 요소의 전체 코드입니다 구성 요소에는이 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이 아니며 사용자 지정 유효성 검사 함수 rules을 따라 그룹화 된 export ed 함수 집합 만 그룹화됩니다. 그럼 당신은 같은 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']]); }