正文 

当前位置： 首页 > 源码 >

在 Angular 4 中，为啥异步验证的嵌套控件不会将其有效性传播到父 FormGroup？

     2023-03-13     43

关键词：

【中文标题】在 Angular 4 中，为啥异步验证的嵌套控件不会将其有效性传播到父 FormGroup？【英文标题】：In Angular 4, why do asynchronously validated nested controls not propagate their validity to the parent FormGroup?在 Angular 4 中，为什么异步验证的嵌套控件不会将其有效性传播到父 FormGroup？ 【发布时间】：2017-09-17 02:03:37 【问题描述】：

在我的 Angular 4.0.2 应用程序中，我有一个 FormGroup，其中包含一个实现 ControlValueAccessor 和 Validator 的嵌套组件。该组件异步验证自己。问题是，即使嵌套组件变为有效，父 FormGroup 仍然无效。

但是，如果我只是将验证更改为同步，则有效性会正确传播到父组。

我已尽可能将其归结为以下 Plunker：

http://plnkr.co/edit/H26pqEE3sRkzKmmhrBgm

这是显示类似设置的第二个 Plunker，但这次输入 FormControl 直接位于 FormGroup 内部，而不是嵌套组件的一部分。在这里，异步验证正确传播：

http://plnkr.co/edit/DSt4ltoO1Cw2Nx1oXxbD

为什么我的异步验证器在组件内定义时没有传播其有效性？

这是来自第一个（损坏的）Plunker 的代码：

import Component, NgModule, VERSION, forwardRef from '@angular/core'
import BrowserModule from '@angular/platform-browser'
import FormsModule, ReactiveFormsModule from '@angular/forms'
import Observable from 'rxjs/Rx'
import 
    FormGroup, FormControl, FormBuilder, Validators, AbstractControl, Validator,
    ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, ValidationErrors
 from '@angular/forms';


@Component(
  selector: 'my-app',
  template: `
<p>When validated asyncronously, why is the parent form group invalid even though its 
inner control is valid?</p>
<p>Try clearing the value to see the asyncronous validation at work.</p>
<p>Try swapping line 58 for 60 to change to syncronous validation, which propagates correctly.</p>
<hr />
<div><code>FormGroup valid = form.valid</code></div><br />
<div [formGroup]="form">
  <nested-control formControlName="nested"></nested-control>
</div>
<hr />
`
)
export class App 
  form: FormGroup;
  constructor(fb: FormBuilder) 
    this.form = fb.group(
      nested: ['required']
    );
  



@Component(
    selector: 'nested-control',
    providers: [
        provide: NG_VALUE_ACCESSOR, 
        useExisting: forwardRef(() => NestedControl),
        multi: true
    , 
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => NestedControl),
        multi: true,
    ],
    template: `
<div [formGroup]="form">
  <input type="text" formControlName="input" (keyup)="keyup($event)">
  <code>NestedControl valid = form.controls.input.valid, errors = form.controls.input.errors|json</code>
</div>
`
)
export class NestedControl implements ControlValueAccessor, Validator 
  form: FormGroup;
  private propagateChange = () => ;

  constructor(fb: FormBuilder) 
    this.form = fb.group(
      // if we change the validation to be syncronous then everything works as expected:
      //input: [null, Validators.required]
      input: [null, null, this.asyncRequiredValidator]
    );
  

  asyncRequiredValidator(control: AbstractControl): ValidationErrors 
    // run the built in required validator after 1 second
    return Observable.interval(1000).take(1).map(_ => 
      const result = Validators.required(control);
      console.log('result', result);
      return result;
    );
  

  keyup() 
    this.propagateChange();
  

  writeValue(v: any): void 
    this.form.setValue( input: v );
  

  registerOnChange(fn: any): void 
    this.propagateChange = fn;
  

  registerOnTouched(fn: any): void 
  

  validate(c: AbstractControl): ValidationErrors 
    return this.form.valid ? null : invalid: true;
  



@NgModule(
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App, NestedControl ],
  bootstrap: [ App ]
)
export class AppModule

【问题讨论】：

【参考方案1】：

我最终发现了一些问题，但我不确定这个解决方案是否最佳。

首先，组件需要提供NG_ASYNC_VALIDATORS 而不是NG_VALIDATORS（尽管像往常一样，我在任何地方都找不到明确的文档）：

@Component(
    selector: 'nested-control',
    providers: [
        provide: NG_ASYNC_VALIDATORS,  // <----- this
        useExisting: forwardRef(() => NestedComponent),
        multi: true,
     ...

接下来，它应该实现 AsyncValidator 而不是 Validator：

export class NestedComponent implements ControlValueAccessor, AsyncValidator 
    ...
    validate(c: AbstractControl): Observable<ValidationErrors | null> 
        // must return result wrapped in Observable
        return Observable.of(this.form.valid ? null : invalid: true);

最后，在验证后，我们必须显式传播更改。我必须使用setTimeout 来确保传播运行验证器的状态，而不是当前状态。这对我来说似乎很hacky，所以如果有人知道更好的方法，请告诉我。

asyncRequiredValidator(control: AbstractControl): ValidationErrors 
    // run the built in required validator after 1 second
    return Observable.interval(1000).take(1).map(_ => 
      const result = Validators.required(control);
      console.log('result', result);
      setTimeout(() => this.propagateChange());   // <!---- propagate post-validation state
      return result;
    );

这是修复所有这些的 Plunker：

http://plnkr.co/edit/6uSWVhdFgyHTvYjHlgmN?p=preview

【讨论】：

您好，我已经尝试过，但它对于多表单控件和一个具有 sysnc 和异步验证的控制器和其他具有同步验证的控制器失败，父没有等待子状态。

在角度 4 中触发验证时，控件标签会突出显示

...英文标题】：controllabelgettinghighlightedwhentriggeringvalidationinangular4【发布时间】：2018-05-1506:22:09【问题描述】：我在我的Angular4验证中实现验证，需要做一些调整。验证工作正常，但可能需要更改消息的显示方式。当我单击窗体上的... 查看详情

当 Angular 4 未在 NgIf 中呈现时，删除验证

】当Angular4未在NgIf中呈现时，删除验证【英文标题】：Removevalidationinangular4whenit\'snotrenderinNgIf【发布时间】：2018-10-0300:51:51【问题描述】：我想删除未使用NgIf呈现控件的验证。我尝试使用指令来删除隐藏控件，但不能这样做，因... 查看详情

Angular 6. 如何在创建的自定义控件中赋予验证状态这个控件？

】Angular6.如何在创建的自定义控件中赋予验证状态这个控件？【英文标题】：Angular6.HowinthecreatedCustomControltogivenValidatorstatethiscontol?【发布时间】：2018-12-2509:51:48【问题描述】：我为表单创建了一个自定义控件。我的控件是这样的... 查看详情

Ionic 4 Angular模板与异步管道绑定到可观察

】Ionic4Angular模板与异步管道绑定到可观察【英文标题】：Ionic4Angulartemplatebindingwithasyncpipetoobservable【发布时间】：2018-11-1903:23:54【问题描述】：我正在将旧的ionic应用程序从V2移动到V4-alpha，并且无法使用异步管道在模板中绑定到... 查看详情

多个字段的Angular 4表单验证

】多个字段的Angular4表单验证【英文标题】：Angular4formvalidationonmultiplefields【发布时间】：2018-05-0100:59:53【问题描述】：编辑：我想要实现的是对一个formControl而不是整个表单进行验证。验证器应检查门牌号、街道等所有原子字段... 查看详情

Angular Deeply Nested Reactive Form：在嵌套的 FormArray 上找不到带有路径的控件

】AngularDeeplyNestedReactiveForm：在嵌套的FormArray上找不到带有路径的控件【英文标题】：AngularDeeplyNestedReactiveForm:CannotfindcontrolwithpathonnestedFormArray【发布时间】：2020-10-0217:51:06【问题描述】：我正在构建一个嵌套的动态表单，其中用... 查看详情

Angular 4图像异步与承载标头

】Angular4图像异步与承载标头【英文标题】：Angular4imageasyncwithbearerheaders【发布时间】：2018-03-1518:33:24【问题描述】：我的任务是使用身份验证标头发出异步图像请求。我有这样的图像路径：<imgsrc="file.src"/>并且我需要将承载... 查看详情

在 Angular 中使用 ControlValueAccessor 继承验证

】在Angular中使用ControlValueAccessor继承验证【英文标题】：InheritingvalidationusingControlValueAccessorinAngular【发布时间】：2018-01-1508:18:07【问题描述】：我有一个自定义表单控件组件（它是一个美化的输入）。它是一个自定义组件的原因... 查看详情

在 Angular 7 表单控件的单个输入字段中验证电子邮件、电话和 PAN 号码

】在Angular7表单控件的单个输入字段中验证电子邮件、电话和PAN号码【英文标题】：ValidateEmail,PhoneandPANnumberinsingleInputfieldinangular7formcontrol【发布时间】：2019-12-2709:40:06【问题描述】：所以我想创建一个输入字段，它会告诉它是哪... 查看详情

Angular 2 动态嵌套表单

】Angular2动态嵌套表单【英文标题】：Angular2DynamicNestedForm【发布时间】：2016-10-2315:19:13【问题描述】：基本上我想创建一个带有嵌套对象的动态表单，如下图所示：收益在模型上的数组中我们应该能够根据需要添加/删除收益。... 查看详情

Angular - 在另一个组件中使用 observable（在异步数据调用中获取值）

】Angular-在另一个组件中使用observable（在异步数据调用中获取值）【英文标题】：Angular-Usingobservable(whichgetsvalueinasynchronousdatacall)inanothercomponent【发布时间】：2020-12-2519:48:05【问题描述】：我正在开发一个带有JWT令牌身份验证的... 查看详情

如何在 Angular2 中触发表单验证器

】如何在Angular2中触发表单验证器【英文标题】：HowtotriggerFormValidatorsinAngular2【发布时间】：2015-11-2211:13:46【问题描述】：在angular2中，我想在更改另一个控件时触发某些控件的验证器。有什么方法可以告诉表单重新验证吗？更... 查看详情

类型“AbstractControl”Angular 4 上不存在属性“控件”[重复]

】类型“AbstractControl”Angular4上不存在属性“控件”[重复]【英文标题】：Property\'controls\'doesnotexistontype\'AbstractControl\'Angular4[duplicate]【发布时间】：2018-04-0604:12:16【问题描述】：我正在Angular4中尝试嵌套的响应式表单。它工作正... 查看详情

嵌套 HTTP 调用 Angular 4

】嵌套HTTP调用Angular4【英文标题】：NestedHTTPcallsAngular4【发布时间】：2018-05-1515:57:36【问题描述】：我试图在json中获得响应，其中我得到一个包含每个声明的数组，其中包含用户和类别。我已将其静态修复，但我想让它动态化，... 查看详情

为啥在非异步方法中包装参数验证是可取的？

】为啥在非异步方法中包装参数验证是可取的？【英文标题】：Whyiswrappingparametervalidationinanon-asyncmethoddesirable?为什么在非异步方法中包装参数验证是可取的？【发布时间】：2021-11-1523:33:49【问题描述】：我在SonarQube中弹出了this... 查看详情

带有子组件和验证的 Angular 2 嵌套表单

】带有子组件和验证的Angular2嵌套表单【英文标题】：Angular2nestedformswithchildcomponentsandvalidation【发布时间】：2017-11-0813:02:47【问题描述】：我正在尝试在Angular2中实现一个带有验证的嵌套表单，我看过帖子并遵循了文档，但我真... 查看详情

angular2 验证：在控件上查找当前验证器

】angular2验证：在控件上查找当前验证器【英文标题】：angular2validation:findingcurrentvalidatorsonacontrol【发布时间】：2016-11-3017:05:20【问题描述】：AngularRC4如何根据其他FormControls或FormGroups的状态添加和删除验证。基于这篇帖子Angular2v... 查看详情

ASP.NET 在嵌套在更新面板中的用户控件中注入 javascript

...：2010-09-2300:31:50【问题描述】：我正在尝试在更新面板的异步回发期间通过Page.LoadControl方法将带有用户Web控件的javascript代码加载到页面中。我已经尝试了专门为该场景设计的脚本管理器方法，但 查看详情