标签: angular-validation

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

我想为其中一个FormControls添加一个自定义验证器.

我目前已将自定义验证器添加为此配置中的函数,并且它工作正常,但它不属于此处,它确实需要存在于我的组件中,但我不确定如何才能附加自定义验证器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 === '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 …

我试图用密码值确认密码.我按照Async验证器标准完成了.但我想知道它没有工作,并给我以下错误.请告诉任何人如何解决此错误.

返回Promise或Observable的预期验证器.

这是我的代码.

呼叫验证器:

cPass: ['', Validators.compose([
  Validators.required, 
  Validators.maxLength(32),
  Validators.minLength(10)
]),
  this.validPassword.bind(this)
]

自定义验证功能:

validPassword(control: AbstractControl) {            
  const isEqual = Observable.of(this.password == control.value);
  return isEqual ? { valid : true } : null;         
}

嗨我正在使用表单生成器在角度2中实现一个表单

在component.ts中,我使用formGroup实现了我的表单

以下是我的代码

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      zip: ['', [<any>Validators.required , …

Bootstrap 4验证样式基于form-control:valid或form-control:invalid.Angular提供了在字段出错时添加任何自定义类的可能性.

如果我遵循规范:https: //getbootstrap.com/docs/4.0/components/forms/#validation

我也可以.form-control.is-invalid为我的input元素添加类.但是,使用具有此策略的自定义验证程序可以为我提供合并的结果;form-control is-invalid :valid

这似乎更重要:valid,这表明我的元素显示为有效,但相关invalid-feedback的看起来没问题!

我有点失落.

编辑

这是一个演示插件:https://plnkr.co/edit/0kxGpRz3JY3ixJbYqRZr ？ p = preview

我有一个 Angular 组件，它定义了一个FormGroup，它有一个嵌套FormGroup作为其控件之一。

孩子FormGroup被作为传递@Input参数给一个子组件，并且有一些孩子里面的控件验证FormGroup。

出于某种原因，父组件的valid属性仅在我更新子组件中的值后才会更新，然后对父 FormGroup组件的输入之一进行随机更改FormGroup（例如向输入添加额外的空间）。

设置相当复杂（根据某些条件在子FormGroup上的控件中添加或删除验证器，这可能是验证不会自动发生的原因）。

如何FormGroup在子项中的任何FormGroup更改后立即手动触发父项重新验证？我在子组件中试过这个：

ngOnInit()

  this.myForm.valueChanges.subscribe(val => {
      this.myForm.updateValueAndValidity({onlySelf: false, emitEvent: true})
  });

这应该child在任何输入更改时触发FormGroup的重新验证，并将事件广播到parent组件，这应该触发 parent 的重新验证FormGroup。但是，我遇到了某种堆栈溢出错误，因为这会导致无限循环。

如何触发父FormGroup级自动重新验证？

我需要将自定义验证器分配给FormGroup。我可以像这样创建FormGroup时执行此操作：

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      }, { validator: this.comparisonValidator })

comparisonValidator(g: FormGroup) {
      if (g.get('myControl1').value > g.get('myControl2'.value)) {
        g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
        return;
      }
}

我遇到一种情况，尽管在实例化FormGroup 之后需要添加自定义验证器，所以我尝试在实例化之后执行此操作myForm，而不是在实例化表单时添加验证器：

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      })

this.myForm.validator = this.comparisonValidator;

这给了我一个编译器错误：

Type '(g: FormGroup) => void' is not assignable to type 'ValidatorFn'.
  Type 'void' is not assignable to type 'ValidationErrors'.

我如何验证程序分配给我FormGroup，以便formGroup作为参数来传递我的comparisonValidator功能？

更新 …

编辑:

我添加了一个JsFiddle,因此您可以轻松排除故障,而不必自己设置环境.如您所见,即使在元素blur上的事件发生之前,也会在"电子邮件"字段上进行验证input,该事件由$scope.Email更改触发.如果您ng-show="!mainForm.validate()"在<p>元素上注释掉,那么您将看到问题没有发生.

我正在使用jQuery Validate的Angular实现,我需要能够检查表单是否有效而不显示错误消息.我在网上看到的标准解决方案是使用jQuery Validate的checkForm()功能,如下所示:

$('#myform').validate().checkForm()

但是,我正在使用的Angular包装器当前没有实现该checkForm功能.我一直在尝试修改源代码以引入它,我担心我会在脑海中.代码很小很简单,我会在这里粘贴它:

(function (angular, $) {
    angular.module('ngValidate', [])

        .directive('ngValidate', function () {
            return {
                require: 'form',
                restrict: 'A',
                scope: {
                    ngValidate: '='
                },
                link: function (scope, element, attrs, form) {
                    var validator = element.validate(scope.ngValidate);

                    form.validate = function (options) {
                        var oldSettings = validator.settings;

                        validator.settings = $.extend(true, {}, validator.settings, options);

                        var valid = validator.form();

                        validator.settings = oldSettings; …

问题陈述 :

父组件中有<form>标签和一些<input>标签,子组件也有一些<input>标签,父组件有一个<submit>,我们在提交表单时验证表单字段.

如何验证表单<input>上父组件的子组件字段submit？

要求:

如果父组件的表单包含input其模板中包含组件的子组件,则input如果从父组件提交,则应在单击时验证这些组件.

发现 :

SO中有很多帖子有相同的问题陈述,但没有找到任何合适的解决方案.以下所有帖子都验证了整个表格,但我的要求是验证子组件中的每个字段.

• Angular 2验证与子组件一起使用
• 允许跨组件层次结构的模板驱动表单输入以使用单个父表单进行注册
• 如何在Angular 4中检查父组件中子组件表单的有效性

我正在构建一个反应式角形式,我正试图找到一种方法来触发提交时的所有验证器.如果验证者是同步的,那就没关系,因为我可以获得内联的状态.否则,如果验证器是异步验证器并且尚未触发验证器,则表单上的ngSubmit方法将处于挂起状态.我试图注册一个表单statusChange属性的订阅,但是当我通过markAsTouched函数调用manualy进行验证时它没有被触发.

这是一些片段:

   //initialization of form and watching for statusChanges
   ngOnInit() {
        this.ctrlForm = new FormGroup({
            'nome': new FormControl('', Validators.required),
            'razao_social': new FormControl('', [], CustomValidators.uniqueName),
            'cnpj': new FormControl('', CustomValidators.cnpj),
        });

        this.ctrlForm.statusChanges.subscribe(
            x => console.log('Observer got a next value: ' + x),
            err => console.error('Observer got an error: ' + err),
            () => console.log('Observer got a complete notification')
        )
    }
    //called on ngSubmit
    register(ctrlForm: NgForm) {
            Forms.validateAllFormFields(this.ctrlForm);
            console.log(ctrlForm.pending); 
            //above will be true if the async validator …

我有一个自定义异步验证器，我想updateOn: 'blur'使用FormBuilder以下方法设置属性：

myForm = this.formBuilder.group({
   email: ['', [Validators.required], [this.myAsyncValidator]]
   // ...
});

我试过这个，但它不起作用：

email: ['', [Validators.required], [this.myAsyncValidator, {updateOn: 'blur'}]]

笔记

我不想像下面这样手动创建表单控件实例：

myForm = new FormGroup({
    email: new FormControl('', {asyncValidators: [this.myAsyncValidator]}, updateOn: 'blur')
});