Validation 如何在Angular 2中向FormControl动态添加验证程序

我正在使用ReactiveFormsModule，并已在常量配置中定义了所有表单控件，包括简单的验证器，如

validators.required

我想在这些表单控件中添加一个自定义验证器

我目前已将自定义验证器作为一个函数添加到此配置中，它工作正常，但它不属于这里，它确实需要在我的组件中存在，但我不确定如何在

FormBuilder

配置了我的所有控件后手动附加自定义验证器

请参见下面类似的代码注释

我如何连接这里

**

this.form.get（'site_id'）。添加自定义valiator

这是我当前的配置代码。

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

我有一个指令，它实际上应该存储自定义验证器

求职组件

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>

拯救
提取批次
是否需要提取批次？
请输入提取批次，例如xyz。
场地
网站是必需的吗？
请输入一个站点，例如xyz。

查看您的代码，您可以做什么：

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

---

你能把你的JobSearchEditComponent放在html文件里吗？我已经添加了HTMLI，我会尝试一下，让你知道它是如何实现的goes@DavidCruwys这方面有什么进展吗？这已经不起作用了，因为.validator不是（或不再是）FormControl的属性。看起来所有通过构造函数添加的验证器都合并到一个函数中。尽管您仍然可以执行

this.site\u id\u control.setValidators（Validators.compose（[this.site\u id\u control.validator，exampleValidator]））

而不需要扩展。

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();

    }
}