标签: angular-validation

我试图在Angular 5上进行自定义验证,但我面临以下错误

Expected validator to return Promise or Observable

我只想在表单中返回错误,如果值与所需的值不匹配,那么我的代码是:

这是我的表单所在的组件

  constructor(fb: FormBuilder, private cadastroService:CadastroService) {
    this.signUp = fb.group({
      "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])],
      "email": ["", Validators.compose([Validators.required, Validators.email])],
      "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])],
      "cpf": ["", Validators.required, ValidateCpf]
    })     
   }

此代码在我想要实现的验证的文件中:

import { AbstractControl } from '@angular/forms';

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    }
    return null;
}

有人能帮我吗？这种类型的验证只适用于observables,还是我能做到而不是一个承诺或可观察的？谢谢

我正在寻找添加一些基本的电子邮件验证来检查用户是否输入了正确的电子邮件地址.目前使用下面的方法,验证会在用户输入时更新,在输入一个字符后出现错误时看起来很奇怪.

validEmail(c: Control){
if(!c.value.match('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?')){
  return {
    validEmail: true
  };
}
return null;
}    

ctrlEmailAddress: Control = new Control('', Validators.compose([
Validators.required, this.validEmail]));

我想知道是否有可能触发对场的模糊进行验证,例如在angularJS中:

ng-model-options="{ updateOn: 'blur' }"

我知道html中输入字段上的blur选项,但除非有办法将控件置于错误状态,否则这不会使我的控件出错.

任何人都可以帮我指出正确的方向吗？

谢谢.

编辑:我正在寻找angular2解决方案,而不是angularJS解决方案.

我正在尝试实现自定义验证器来检查密码和密码确认是否相等.问题是验证器正在获取未定义的密码和确认的密码参数.我该如何做这项工作.该函数有效,如果我将条件更改为===而不是!==当字段相同时,它会正确抛出错误.有谁知道这里的错误是什么？

signup.component.html

<div class="col-md-7 col-md-offset-1 col-sm-7">
  <div class="block">
    <div class="well">
        <form (onSubmit)="onSubmit()" [formGroup]="signUpForm">
          <div class="form-group">
            <label for="username" class="control-label">Nombre de usuario:</label>
            <input type="text" class="form-control" formControlName="username"  title="Please enter your username" placeholder="username">
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('required') && signUpForm.get('username').touched">El nombre de usuario es obligatorio</p>
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('minlength') && signUpForm.get('username').touched">El nombre de usuario debe tener al menos 6 caracteres</p>
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('maxlength') && signUpForm.get('username').touched">El nombre de usuario debe tener menos de 15 caracteres</p>
          </div>
          <div class="form-group">
            <label for="email" class="control-label">E-mail:</label>
            <input class="form-control" formControlName="email" title="Please enter your email" …

我将我的项目迁移到 angular 11，我注意到我添加的全局验证FormBuilder.group不推荐使用以下消息：

group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming.
Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.

所以这已被弃用：

  ingredientForm = this.fb.group({
    ingredientType: ['', Validators.required],
    ingredientFlavor: [''],
    isMultiFlavor: [''],
    ingredientBrand: [''],
    ingredientName: [''],
    imageFile: ['']
  }, {validators: [ValidateThirdNumber.validate]});

如果没有这个validators选项，它就不是。

我的ValidateThirdNumber验证器：

class ValidateThirdNumber {
  static validate(control: AbstractControl): void {
      if (control) {
      const isMultiFlavor = control.get('isMultiFlavor')?.value;
      const ingredientFlavor = control.get('ingredientFlavor')?.value;
      const ingredientBrand = control.get('ingredientBrand')?.value;
      const ingredientName …

为了展示一种真实世界的例子,假设我们想在我们的应用程序中使用@ angular/material的datepicker.

我们希望在很多页面上使用它,因此我们希望将它添加到具有相同配置的表单中非常容易.为了满足这一需求,我们在<mat-datepicker>ControlValueAccessor实现周围创建了一个自定义角度组件,以便能够[(ngModel)]在其上使用.

我们希望处理组件中的典型验证,但同时,我们希望为包含我们的外部组件提供验证结果CustomDatepickerComponent.

作为一个简单的解决方案,我们可以实现这样的validate()方法(innerNgModel来自导出的ngModel:.#innerNgModel="ngModel"请参阅本问题末尾的完整代码):

validate() {
    return (this.innerNgModel && this.innerNgModel.errors) || null;
}

此时,我们可以以非常简单的方式在任何表单组件中使用datepicker(如我们所愿):

<custom-datepicker [(ngModel)]="myDate"></custom-datepicker>

我们还可以扩展上面的行以获得更好的调试体验(像这样):

<custom-datepicker [(ngModel)]="myDate" #date="ngModel"></custom-datepicker>
<pre>{{ date.errrors | json }}</pre>

只要我更改自定义datepicker组件中的值,一切正常.如果datepicker有任何错误,则周围的表单仍然无效(如果datepicker有效,它将变为有效).

但!

如果myDate外部组件的成员(一个作为ngModel传递)由外部组件(如:)更改this.myDate= null,则会发生以下情况:

1. 在writeValue()该CustomDatepickerComponent的运行,并将其更新日期选择器的值.
2. 在validate()该CustomDatepickerComponent的运行,但在这一点上innerNgModel没有更新,因此返回以前的状态的验证.

要解决此问题,我们可以从setTimeout中的组件发出更改:

public writeValue(data) {
    this.modelValue = data ? moment(data) : null;
    setTimeout(() => { this.emitChange(); }, 0);
}

在这种情况下,emitChange(自定义组件的广播更改)将触发新的验证.并且由于setTimeout,它将在下一个周期运行,而innerNgModel已经更新.

我的问题是,如果有更好的方法来处理这个问题而不是使用setTimeout？ 如果可能的话,我会坚持模板驱动的实现.

提前致谢!

该示例的完整源代码:

定制datepicker.component.ts

import {Component, forwardRef, Input, …

在我的Angular 4应用程序中,我有一个包含多个控件的表单.

在某些方面,我需要强制更新其有效性,所以我正在做:

this.form.get('control1').updateValueAndValidity();
this.form.get('control2').updateValueAndValidity();
this.form.get('control3').updateValueAndValidity();
// and so on....

然后:

this.form.updateValueAndValidity();

这很好用.

然而,我想知道是否有更好的方法来完成相同的事情,只需在父窗体上调用一个方法.

根据其文档,updateValueAndValidity()方法:

默认情况下,它还会更新其祖先的值和有效性.

但在我的情况下,我需要更新其后代的价值和有效性.所以我可以摆脱许多代码行.

我有一个FormGroup如下定义:

this.businessFormGroup: this.fb.group({
    'businessType': ['', Validators.required],
    'description': ['', Validators.compose([Validators.required, Validators.maxLength(200)])],
    'income': ['']
  })

现在,当businessType是Other,我想删除Validators.required的验证description.如果businessType不是Other,我想加回来Validators.required.

我使用以下代码动态添加/删除Validators.required.但是,它会清除现有的Validators.maxLength验证程序.

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.get('description').validator = <any>Validators.compose([Validators.required]);               
} else {                
    this.businessFormGroup.get('description').clearValidators();               
}

this.businessFormGroup.get('description').updateValueAndValidity(); 

我的问题是,在添加/删除required验证器时如何保留现有的验证器.

我有一个Angular7 app&Reactive Forms Module用于验证和表单。

这就是我的模板的样子。

<div class="row" [formGroup]="jobForm">
<div class="form-group"
 [ngClass]="{'has-error': jobForm.get('jobTitle').errors && 
  (jobForm.get('jobTitle').touched || jobForm.get('jobTitle').dirty)  }">
  <input type="text" class="form-control" formControlName="jobTitle" />
  <span class="help-block" *ngIf="formError">
  {{ formError.jobTitle }}
</span>
</div>
 <br />
 <button type="button" class="btn btn-primary" disabled="jobTitle.errors.required"
(click)="submit(jobTitle,jobDesc)">Create</button>

组件.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';

@Component({
selector: 'app-create-job',
templateUrl: './create-job.component.html',
styleUrls: ['./create-job.component.css']
})
export class CreateJobComponent implements OnInit {
 constructor(private fb: FormBuilder) {}
 jobForm: FormGroup;
 formError: any; …

致力于angular2 beta Forms.经过大量的搜索后发现没什么用处.希望这里有人帮助我.

基本上我有点困惑如何以适当的方式使用angular2中的表单(即使用ngControl,ngFormControl等).我在这里创建了一个plnkr

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

这是我的.html代码: -

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">

  <div class="col-md-7">
Name: <input type="text" id="name" placeholder="Name" class="form-control" ngControl="name">
  </div>
  <div class="col-md-7">
  Password:   <input type="text" id="password" placeholder="password" class="form-control" ngControl="password">
  </div>

  <div class="col-md-7">
    <input type="radio" name='type'>Btech
    <input type="radio" name='type'>Mtech
  </div>

  <div class="col-md-7">
    <input type="checkbox" >Math
    <input type="checkbox">English
    <input type="checkbox">Science
  </div>
  <br>
  <div class="col-md-7">
    <select #selectOption (change)='getValue(selectOption.value)' class='form-control'>
      <option value='1'>One Value</option>
      <option value='2'>two Value</option>
      <option value='3'>Three Value</option>
    </select>
  </div>
</form>
<button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"> Create </button>

和.ts代码在这里: …

我正在使用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 …