Question

这就是窍门：

已将具有实现的ControlValueAccessor接口的组件用作自定义控件。
此组件在某些反应形式中用作FormControl。
此自定义控件具有异步验证器。

问题：

ControlValueAccessor接口中的方法validate（）在值更改后立即调用，并且不等待异步验证器。当然，控制是无效和未决的（因为正在进行验证），主表单也将变为无效和未决的。一切都很好。

但是。当异步验证器完成验证并返回null（意味着值有效）时，自定义控件将变为有效，状态也将变为有效，但是父级仍然无效且具有挂起状态，因为未再次调用值访问器的validate（）。

我试图从validate（）方法返回observable，但是主窗体将其解释为错误对象。

我找到了解决方法：异步验证程序完成验证后，从自定义控件传播更改事件。它迫使主窗体再次调用validate（）方法并获得正确的有效状态。但是它看起来又脏又粗糙。

问题是： 要使子窗体由子自定义控件中的异步验证器管理，必须做些什么？必须说它与同步验证器一起很好地工作。

所有项目代码都可以在这里找到： https://stackblitz.com/edit/angular-fdcrbl

主表单模板：

<form [formGroup]="mainForm">
    <child-control formControlName="childControl"></child-control>
</form>

主表单类：

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
  mainForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.mainForm = this.formBuilder.group({
      childControl: this.formBuilder.control("")
    });
  }
}

自定义子控件模板：

<div [formGroup]="childForm">
    <div class="form-group">
        <label translate>Child control: </label>
        <input type="text" formControlName="childControl">
    </div>
</div>

自定义子控件类：

import { Component, OnInit } from "@angular/core";
import { AppValidator } from "../app.validator";
import {
  FormGroup,
  AsyncValidator,
  FormBuilder,
  NG_VALUE_ACCESSOR,
  NG_ASYNC_VALIDATORS,
  ValidationErrors,
  ControlValueAccessor
} from "@angular/forms";
import { Observable } from "rxjs";
import { map, first } from "rxjs/operators";

@Component({
  templateUrl: "./child-control.component.html",
  selector: "child-control",
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: ChildControlComponent,
      multi: true
    },
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: ChildControlComponent,
      multi: true
    }
  ]
})
export class ChildControlComponent
  implements ControlValueAccessor, AsyncValidator, OnInit {
  childForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private appValidator: AppValidator
  ) {}

  ngOnInit() {
    this.childForm = this.formBuilder.group({
      childControl: this.formBuilder.control(
        "",
        [],
        [this.appValidator.asyncValidation()]
      )
    });
    this.childForm.statusChanges.subscribe(status => {
      console.log("subscribe", status);
    });
  }

  // region CVA
  public onTouched: () => void = () => {};

  writeValue(val: any): void {
    if (!val) {
      return;
    }
    this.childForm.patchValue(val);
  }

  registerOnChange(fn: () => void): void {
    this.childForm.valueChanges.subscribe(fn);
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    isDisabled ? this.childForm.disable() : this.childForm.enable();
  }

  validate(): Observable<ValidationErrors | null> {
    console.log('validate');
    // return this.taxCountriesForm.valid ? null : { invalid: true };
    return this.childForm.statusChanges.pipe(
      map(status => {
        console.log('pipe', status);
        return status == "VALID" ? null : { invalid: true };
      }),
    );
  }
  // endregion
}

Answer 1

我尝试了不同的方法和技巧。但是正如安德烈·盖特（AndreiGătej）提到的那样，主要形式取消了孩子控制权的变更。

我的目标是保持自定义控件独立，并且不将验证移至主表单。这花了我一头白发，但我认为我找到了可接受的解决方法。

需要从子组件的验证功能内部的主要形式传递控制权并在那里管理有效性。在现实生活中，它可能看起来像：

  validate(control: FormControl): Observable<ValidationErrors | null> {
    return this.childForm.statusChanges.pipe(
      map(status => {
        if (status === "VALID") {
          control.setErrors(null);
        }
        if (status === "INVALID") {
          control.setErrors({ invalid: true });
        }
        // you still have to return correct value to mark as PENDING
        return status == "VALID" ? null : { invalid: true };
      }),
    );
  }

Answer 2

问题在于，到childForm.statusChanges发出时，异步验证程序的订阅将已被取消。

这是因为childForm.valueChanges在之前 childForm.statusChanges发出。

发出childForm.valueChanges时，将调用已注册的onChanged回调函数：

registerOnChange(fn: () => void): void {
  this.childForm.valueChanges.subscribe(fn);
}

这将导致FormControl（controlChild）更新其值

function setUpViewChangePipeline(control: FormControl, dir: NgControl): void {
  dir.valueAccessor !.registerOnChange((newValue: any) => {
    /* ... */

    if (control.updateOn === 'change') updateControl(control, dir);
  });
}

// Update the MODEL based on the VIEW's value
function updateControl(control: FormControl, dir: NgControl): void {
  /* ... */

  // Will in turn call `control.setValueAndValidity`
  control.setValue(control._pendingValue, {emitModelToViewChange: false});
  /* ... */
}

表示将到达updateValueAndValidity：

updateValueAndValidity(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
  this._setInitialStatus();
  this._updateValue();

  if (this.enabled) {
    this._cancelExistingSubscription(); // <- here the existing subscription is cancelled!
    (this as{errors: ValidationErrors | null}).errors = this._runValidator(); // Sync validators
    (this as{status: string}).status = this._calculateStatus(); // VALID | INVALID | PENDING | DISABLED

    if (this.status === VALID || this.status === PENDING) {
      this._runAsyncValidator(opts.emitEvent);
    }
  }

  if (opts.emitEvent !== false) {
    (this.valueChanges as EventEmitter<any>).emit(this.value);
    (this.statusChanges as EventEmitter<string>).emit(this.status);
  }

  if (this._parent && !opts.onlySelf) {
    this._parent.updateValueAndValidity(opts);
  }
}

我想出的方法允许您的自定义组件跳过实现ControlValueAccesor和AsyncValidator接口的操作。

app.component.html

<form [formGroup]="mainForm">
    <child-control></child-control>
</form>

### app.component.ts

  ngOnInit() {
    this.mainForm = this.formBuilder.group({
      childControl: this.formBuilder.control("", null, [this.appValidator.asyncValidation()])
    });
 }

child-control.component.html

<div class="form-group">
  <h4 translate>Child control with async validation: </h4>
  <input type="text" formControlName="childControl">
</div>

child-control.component.ts

@Component({
  templateUrl: "./child-control.component.html",
  selector: "child-control",
  providers: [
  ],
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupDirective }
  ]
})
export class ChildControlComponent
  implements OnInit { /* ... */ }

关键是要在{ provide: ControlContainer, useExisting: FormGroupDirective }中提供viewProviders。

这是因为在FormControlName内部，借助@Host装饰器检索了父抽象控件。这样，您就可以在viewProviders内指定要获取的@Host装饰器声明的依赖项（在这种情况下为ControlContainer）。
FormControlName像这样@Optional() @Host() @SkipSelf() parent: ControlContainer

进行检索

StackBlitz。

角反应形式自定义控件异步验证

2 个答案:

app.component.html

### app.component.ts

child-control.component.html

child-control.component.ts