Jak dynamicznie dodawać Validator do FormControl w Angular 2

Question

Używam ReactiveFormsModule i zdefiniowałem wszystkie moje formanty formularzy, w tym proste sprawdzania poprawności, takie jak Validators.required w konfiguracji stałej.

Chciałem dodać niestandardowy weryfikator do jednego z tych FormControls.

Obecnie dodałem własny weryfikator jako funkcję w tej konfiguracji i działa dobrze, ale nie pasuje tutaj, naprawdę musi żyć w moim komponencie, ale nie jestem pewien, jak mogę po prostu dołącz niestandardowy weryfikator ręcznie po skonfigurowaniu wszystkich elementów sterujących na FormBuilder.

patrz komentarz poniżej kod, który wygląda jak ten

Jak dołączyć Tutaj

* ??? *

this.form.get ('site_id'). Dodawanie własnych valiator

To jest mój aktualny kod konfiguracji.

import {FormControl, Validators, FormBuilder} from '@angular/forms'; 

var fb = new FormBuilder(); 

function exampleValidator(control: FormControl): { [s: string]: boolean} { 
    if (control.value === 'Example'){ 
     return { example: true }; 
    } 

    return null; 
} 

export const formConfig = fb.group({ 
    'extract_batch_id': ['bbbbbbbbbbbbb', 
    [ 
     Validators.required 
    ]], 
    'site_id': ['blah', 
    [ 
     Validators.required, 
     exampleValidator 
    ]] 
}); 

mam dyrektywę, która naprawdę powinna być przechowywana niestandardowy walidator

Job Search Komponent

import {Component, Input, OnInit, OnDestroy} from '@angular/core'; 
import {FormGroup, FormControl} from '@angular/forms'; 
import {ActivatedRoute} from '@angular/router'; 
import {Subscription} from 'rxjs'; 

import {Job} from '../../../models/job'; 
import {JobService} from '../../../services/api/job.service'; 
import {DebugService} from '../../../common/debug/debug.service'; 
import {formConfig} from './edit.form-config'; 

@Component({ 
    selector: 'wk-job-search-edit', 
    template: require('./edit.html') 
}) 
export class JobSearchEditComponent { 
    form: FormGroup; 

    job: Job; 

    @Input() jobId: number; 
    private subscription: Subscription; 

    constructor(
     private route: ActivatedRoute, 
     private jobService: JobService, 
     private debug: DebugService){ 

     // Configure form FormGroup via exported formConfig 
     this.form = formConfig; 

     // How do I Attach Here 
     // *** ??? *** 
     // this.form.get('site_id').add custom valiator 
    } 

    /* 
    exampleValidator(control: FormControl): { [s: string]: boolean} { 
     if (control.value === 'Example'){ 
      return { example: true }; 
     } 

     return null; 
    } 
    */ 
} 

JobSearch Edit.html

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 

    <button type="submit" class="btn btn-success" [disabled]="!form.valid">Save</button> 
    <div class="form-group" [ngClass]="{'has-danger':!form.get('extract_batch_id').valid}"> 
     <label for="extract_batch_id" class="form-control-label">Extract Batch</label> 
     <input id="extract_batch_id" formControlName="extract_batch_id" type="text" placeholder="Extract Batch" class="form-control input-sm"> 
     <div *ngIf="!form.get('extract_batch_id').valid"> 
      <div class="form-control-feedback">Extract Batch is required?</div> 
      <small class="form-text text-muted">Please enter a Extract Batch, eg. xyz.</small> 
     </div> 
    </div> 

    <div class="form-group" [ngClass]="{'has-danger':!form.get('site_id').valid}"> 
     <label for="site_id" class="form-control-label">Site</label> 
     <input id="site_id" formControlName="site_id" type="text" placeholder="Site" class="form-control input-sm"> 
     <div *ngIf="!form.get('site_id').valid"> 
      <div class="form-control-feedback">Site is required?</div> 
      <small class="form-text text-muted">Please enter a Site, eg. xyz.</small> 
     </div> 
    </div> 


</form> 

Answer 1

Patrząc na kodzie, co można zrobić:

<div class="form-group" [ngClass]="{'has-danger':!form.get('site_id').valid}"> 
     <label for="site_id" class="form-control-label">Site</label> 
     <input id="site_id" [formControl]="site_id_control" type="text" placeholder="Site" class="form-control input-sm"> 
     <div *ngIf="!form.get('site_id').valid"> 
      <div class="form-control-feedback">Site is required?</div> 
      <small class="form-text text-muted">Please enter a Site, eg. xyz.</small> 
     </div> 
    </div> 

Spójrz na [formControl] = „site_id_control”

Następnie, w ten sposób, można dodać lub usunąć weryfikacje tej konkretnej kontroli jak to:

wewnątrz swojej klasie:

export class JobSearchEditComponent { 
    private site_id_control=this.form.controls['site_id']; 

    updateValidator(){ 
     let exisitingValidators = this.site_id_control.validators; 
     this.site_id_control.setValidators(Validators.compose([...existingValidators , exampleValidator])) 

     // you probably also need this : 
     this.site_id_control.updateValueAndValidity(); 

    } 
} 

Answer 2

Dodaj własny walidator w angular2 reaktywnej postaci:

this.yourForGroup = this.formBuilder.group({  
    'yourKey': ['',[Validators.required,this.yourFunctionName]]  
)} 

this.yourFunctionName(control: FormControl){  
    return your operations..  
}