Comment ajouter dynamiquement un Validateur à un FormControl dans Angular 2

Question

J'utilise ReactiveFormsModule et j'ai défini tous mes contrôles de formulaire, y compris des validateurs simples tels que Validators.required dans une configuration const.

Je voulais ajouter un validateur personnalisé à l'un de ces FormControls.

J'ai actuellement ajouté le validateur personnalisé en tant que fonction dans cette configuration, et cela fonctionne très bien, mais ça n'a pas sa place ici, il doit vraiment vivre dans mon composant, mais je ne suis pas sûr de savoir comment je peux attacher un validateur personnalisé manuellement après que le FormBuilder a configuré tous mes contrôles.

Voir ci-dessous le code Commentaire qui ressemble à ceci

Comment joindre ici

* ??? *

this.form.get ('site_id'). Ajouter valiator personnalisé

Ceci est mon code de configuration actuelle.

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

J'ai une directive qui devrait vraiment être stocker le validateur personnalisé

emploi Rechercher Component

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

En regardant votre code, ce que vous pouvez faire:

<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> 

Regardez [FormControl] = « site_id_control »

Alors, de cette façon, vous pouvez ajouter ou supprimer les validateurs de cette commande spécifique comme ceci:

dans votre classe:

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

Ajouter validateur personnalisé dans angular2 forme réactive:

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

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