如何在 Angular 2 中将验证器动态添加到 FormControl [英] How to Add a Validator dynamically to a FormControl in Angular 2

查看：45
本文介绍了如何在 Angular 2 中将验证器动态添加到 FormControl的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我想向其中一个 FormControl 添加自定义验证器.

我目前在这个配置中添加了自定义验证器作为一个函数，它工作正常，但它不属于这里，它确实需要存在于我的组件中，但我不确定如何附加在 FormBuilder 配置我的所有控件后手动自定义验证器.

请参阅下面的代码注释

<块引用>

我如何在此处附加

* ???*

this.form.get('site_id').添加自定义验证器

这是我当前的配置代码.

import {FormControl, Validators, FormBuilder} from '@angular/forms';var fb = new FormBuilder();function exampleValidator(control: FormControl): { [s: string]: boolean} {if (control.value === '例子'){返回 { 示例:true };}返回空；}export const formConfig = fb.group({'extract_batch_id': ['bbbbbbbbbbbb',[Validators.required]]，'site_id':['等等'，[Validators.required,示例验证器]]});

我有一个真正应该存储自定义验证器的指令

职位搜索组件

import {Component, Input, OnInit, OnDestroy} from '@angular/core';从@angular/forms"导入 {FormGroup, FormControl}；从@angular/router"导入{ActivatedRoute}；从'rxjs'导入{订阅}；从'../../../models/job'导入{Job}；从'../../../services/api/job.service'导入{JobService}；从'../../../common/debug/debug.service'导入{DebugService}；从'./edit.form-config'导入{formConfig}；@成分({选择器:'wk-job-search-edit'，模板:要求('./edit.html')})导出类 JobSearchEditComponent {表格:表格组；工作:工作；@Input() jobId: 数字；私人订阅:订阅；构造函数(私人路线:ActivatedRoute，私人作业服务:作业服务，私人调试:DebugService){//通过导出的 formConfig 配置表单 FormGroupthis.form = formConfig;//我如何在这里附加//*** ???***//this.form.get('site_id').添加自定义验证器}/*exampleValidator(control: FormControl): { [s: string]: boolean} {if (control.value === '例子'){返回 { 示例:true };}返回空；}*/}

JobSearch Edit.html

<button type="submit" class="btn btn-success" [disabled]="!form.valid">保存</button><div class="form-group" [ngClass]="{'has-danger':!form.get('extract_batch_id').valid}"><label for="extract_batch_id" class="form-control-label">提取批次</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">是否需要提取批次?</div><small class="form-text text-muted">请输入一个提取批次，例如.xyz.</小>

<div class="form-group" [ngClass]="{'has-danger':!form.get('site_id').valid}"><label for="site_id" class="form-control-label">站点</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">需要网站吗?</div><small class="form-text text-muted">请输入站点，例如.xyz.</小>

</表单>

解决方案

看看你的代码，你能做什么:

<label for="site_id" class="form-control-label">站点</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">需要网站吗?</div><small class="form-text text-muted">请输入站点，例如.xyz.</小>

看看[formControl]="site_id_control"

然后，通过这种方式，您可以像这样从该特定控件中添加或删除验证器:

在你的课堂上:

导出类 JobSearchEditComponent {private site_id_control=this.form.controls['site_id'];更新验证器(){让 exisitingValidators = this.site_id_control.validators;this.site_id_control.setValidators(Validators.compose([...existingValidators , exampleValidator]))//你可能还需要这个:this.site_id_control.updateValueAndValidity();}}

I am using ReactiveFormsModule and have defined all my form controls including simple validators such as Validators.required within a const configuration.

I wanted to add a custom validator to one of those FormControls.

I have currently added the custom validator as a function within this configuration, and it is working fine, but it does not belong here, it really needs to live within my component, but I'm not sure how I can just attach a custom validator manually after the FormBuilder has configured all my controls.

See Code Comment below that looks like this

How do I Attach Here

* ??? *

this.form.get('site_id').add custom valiator

This is my current configuration code.

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

I have a directive that really should be storing the custom validator

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

解决方案

Looking at your code, what you could do: 

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

Look at [formControl]="site_id_control"

Then, this way, you can add or remove the validators from that specific control like this:

inside your class: 

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

    }
}

这篇关于如何在 Angular 2 中将验证器动态添加到 FormControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆