我能否在Angular 2+中访问自定义ControlValueAccessor的formControl？

Question

我想在Angular 2+中使用ControlValueAccessor接口创建自定义表单元素。这个元素将包装一个<select>。是否可能将formControl属性传播到包装的元素？ 在我的情况下，验证状态没有传递到嵌套的select，如您在附加的屏幕截图中所见。

我的组件如下：

  const OPTIONS_VALUE_ACCESSOR: any = {
  multi: true,
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => OptionsComponent)
  };

  @Component({
  providers: [OPTIONS_VALUE_ACCESSOR], 
  selector: 'inf-select[name]',
  templateUrl: './options.component.html'
  })
  export class OptionsComponent implements ControlValueAccessor, OnInit {

  @Input() name: string;
  @Input() disabled = false;
  private propagateChange: Function;
  private onTouched: Function;

  private settingsService: SettingsService;
  selectedValue: any;

  constructor(settingsService: SettingsService) {
  this.settingsService = settingsService;
  }

  ngOnInit(): void {
  if (!this.name) {
  throw new Error('Option name is required. eg.: <options [name]="myOption"></options>>');
  }
  }

  writeValue(obj: any): void {
  this.selectedValue = obj;
  }

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

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

  setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
  }
  }

这是我的组件模板：

<select class="form-control"
  [disabled]="disabled"
  [(ngModel)]="selectedValue"
  (ngModelChange)="propagateChange($event)">
  <option value="">Select an option</option>
  <option *ngFor="let option of settingsService.getOption(name)" [value]="option.description">
  {{option.description}}
  </option>
  </select>

- SaWo

---

你能在 Plunker 上重现它吗？ - yurzui

Answer 1

示例 Plunker

我看到有两个选项：

1. 每当 <select> 的 FormControl 值更改时，将组件 FormControl 中的错误传播到 <select> 的 FormControl
2. 将组件 FormControl 中的验证器传播到 <select> 的 FormControl

以下变量可用：

• selectModel 是 <select> 的 NgModel
• formControl 是作为参数接收的组件的 FormControl

选项 1：传播错误

  ngAfterViewInit(): void {
    this.selectModel.control.valueChanges.subscribe(() => {
      this.selectModel.control.setErrors(this.formControl.errors);
    });
  }

选项2：传播验证器

  ngAfterViewInit(): void {
    this.selectModel.control.setValidators(this.formControl.validator);
    this.selectModel.control.setAsyncValidators(this.formControl.asyncValidator);
  }

两者的区别在于传播错误意味着已经有了错误，而第二个选项涉及执行验证器第二次。其中一些，如异步验证器可能太昂贵而无法执行。

传播所有属性没有通用解决方案。各种属性由各种指令或其他方式设置，因此具有不同的生命周期，这意味着需要特殊处理。当前解决方案涉及传播验证错误和验证器。有许多可用的属性。

请注意，您可以通过订阅FormControl.statusChanges()来获取FormControl实例的不同状态更改。这样，您可以知道控件是有效、无效、禁用还是挂起（异步验证仍在运行）。

验证的工作原理是什么？

在幕后，验证器使用指令（查看源代码）应用。这些指令有providers: [REQUIRED_VALIDATOR]，这意味着它们使用自己的分层注入器来注册验证器实例。因此，根据应用于元素上的属性，指令将在与目标元素关联的注入器中添加验证器实例。

接下来，NgModel和FormControlDirective检索这些验证器。

验证器以及值访问器的检索方式如下：

  constructor(@Optional() @Host() parent: ControlContainer,
              @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
              @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
              @Optional() @Self() @Inject(NG_VALUE_ACCESSOR)

分别是：

  constructor(@Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
              @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
              @Optional() @Self() @Inject(NG_VALUE_ACCESSOR)
              valueAccessors: ControlValueAccessor[])

注意使用了@Self()，因此在获取依赖项时使用了自己的注入器（应用指令的元素的注入器）。 NgModel和FormControlDirective都有一个FormControl实例，它实际上更新值并执行验证器。

因此，与之交互的主要点是FormControl实例。

此外，所有验证器或值访问器都在应用它们的元素的注入器中注册。这意味着父级不应该访问该注入器。因此，从当前组件访问由<select>提供的注入器是一种不好的做法。 选项1的示例代码（可以轻松替换为选项2）

以下示例有两个验证器：一个是必填项，另一个是强制选项匹配“option 3”的模式。 PLUNKER

options.component.ts

import {AfterViewInit, Component, forwardRef, Input, OnInit, ViewChild} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, NgModel} from '@angular/forms';
import {SettingsService} from '../settings.service';

const OPTIONS_VALUE_ACCESSOR: any = {
  multi: true,
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => OptionsComponent)
};

@Component({
  providers: [OPTIONS_VALUE_ACCESSOR],
  selector: 'inf-select[name]',
  templateUrl: './options.component.html',
  styleUrls: ['./options.component.scss']
})
export class OptionsComponent implements ControlValueAccessor, OnInit, AfterViewInit {

  @ViewChild('selectModel') selectModel: NgModel;
  @Input() formControl: FormControl;

  @Input() name: string;
  @Input() disabled = false;

  private propagateChange: Function;
  private onTouched: Function;

  private settingsService: SettingsService;

  selectedValue: any;

  constructor(settingsService: SettingsService) {
    this.settingsService = settingsService;
  }

  ngOnInit(): void {
    if (!this.name) {
      throw new Error('Option name is required. eg.: <options [name]="myOption"></options>>');
    }
  }

  ngAfterViewInit(): void {
    this.selectModel.control.valueChanges.subscribe(() => {
      this.selectModel.control.setErrors(this.formControl.errors);
    });
  }

  writeValue(obj: any): void {
    this.selectedValue = obj;
  }

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

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

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
}

options.component.html

<select #selectModel="ngModel"
        class="form-control"
        [disabled]="disabled"
        [(ngModel)]="selectedValue"
        (ngModelChange)="propagateChange($event)">
  <option value="">Select an option</option>
  <option *ngFor="let option of settingsService.getOption(name)" [value]="option.description">
    {{option.description}}
  </option>
</select>

options.component.scss

:host {
  display: inline-block;
  border: 5px solid transparent;

  &.ng-invalid {
    border-color: purple;
  }

  select {
    border: 5px solid transparent;

    &.ng-invalid {
      border-color: red;
    }
  }
}

使用方法

定义FormControl实例：

export class AppComponent implements OnInit {

  public control: FormControl;

  constructor() {
    this.control = new FormControl('', Validators.compose([Validators.pattern(/^option 3$/), Validators.required]));
  }
...

将 FormControl 实例绑定到组件：

<inf-select name="myName" [formControl]="control"></inf-select>

虚拟 SettingsService

/**
 * TODO remove this class, added just to make injection work
 */
export class SettingsService {

  public getOption(name: string): [{ description: string }] {
    return [
      { description: 'option 1' },
      { description: 'option 2' },
      { description: 'option 3' },
      { description: 'option 4' },
      { description: 'option 5' },
    ];
  }
}

- andreim

---

你好！感谢您的回答。但是，当通过FormBuilder构建表单时，如何访问FormControl？在您的示例中，组件将以以下方式调用：<inf-select formControlName="someControl"></inf-select>。 - Slava Fomin II

假设您使用 FormBuilder 创建了一个 FormGroup。然后，您可以通过 formGroup.controls['someControl'] 或 formGroup.get('someControl') 获取控件。@SlavaFominII - andreim

是的，我知道，谢谢。我在这里澄清了我的问题：https://dev59.com/JFcP5IYBdhLWcg3wNnjW - Slava Fomin II

在使用*ngFor与方法（ngFor="let option of settingsService.getOption(name)")时，这是一种非常糟糕的做法。即使返回的数组看起来相同，它也会被不断地调用。 - adripanico

@adripanico 很好的观点！那个实现部分是问题的一部分，我故意保留了所有内容，以便用户通过比较两者轻松吸收。因此，我将所有内容存根以使其看起来几乎相同。 - andreim

Answer 2

我认为以下是在基于ControlValueAccessor的组件中访问FormControl最干净的解决方案。该解决方案基于在Angular Material文档这里所提到的内容。

// parent component template
<my-text-input formControlName="name"></my-text-input>

@Component({
  selector: 'my-text-input',
  template: '<input
    type="text"
    [value]="value"
  />',
})
export class MyComponent implements AfterViewInit, ControlValueAccessor  {

  // Here is missing standard stuff to implement ControlValueAccessor interface

  constructor(@Optional() @Self() public ngControl: NgControl) {
    if (ngControl != null) {
      // Setting the value accessor directly (instead of using
      // the providers) to avoid running into a circular import.
      ngControl.valueAccessor = this;
    }
  }

    ngAfterContentInit(): void {
       const control = this.ngControl && this.ngControl.control;
       if (control) {
          // FormControl should be available here
       }
    }
}

- Rui Marques

---

对我来说不起作用，你能否在Stackblitz上提供一个可行的示例？ - LeonardoX

Answer 3

这里是一个示例，展示如何获取（并重用）底层的FormControl和底层的ControlValueAccessor。

当包装组件（比如输入框）时，这非常有用，因为你可以重用已经存在的FormControl和由Angular创建的ControlValueAccessor，从而避免重新实现它们。

@Component({
  selector: 'resettable-input',
  template: `
     <input type="text" [formControl]="control">
     <button (click)="clearInput()">clear</button>
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: ResettableInputComponent,
    multi: true
  }]
})
export class ResettableInputComponent implements ControlValueAccessor {

  @ViewChild(FormControlDirective, {static: true}) formControlDirective: FormControlDirective;
  @Input() formControl: FormControl;

  @Input() formControlName: string;

  // get hold of FormControl instance no matter formControl or formControlName is given.
  // If formControlName is given, then this.controlContainer.control is the parent FormGroup (or FormArray) instance.
  get control() {
    return this.formControl || this.controlContainer.control.get(this.formControlName);
  }

  constructor(private controlContainer: ControlContainer) { }

  clearInput() {
    this.control.setValue('');
  }

  registerOnTouched(fn: any): void {
    this.formControlDirective.valueAccessor.registerOnTouched(fn);
  }

  registerOnChange(fn: any): void {
    this.formControlDirective.valueAccessor.registerOnChange(fn);
  }

  writeValue(obj: any): void {
    this.formControlDirective.valueAccessor.writeValue(obj);
  }

  setDisabledState(isDisabled: boolean): void {
    this.formControlDirective.valueAccessor.setDisabledState(isDisabled);
  }
}

- Brad C

Answer 4

如果您实现了验证（Validator / NG_VALIDATORS），则 AbstractControl 会在很早的时候传递到您的验证函数中。您可以将其存储起来。

  validate(c: AbstractControl): ValidationErrors {
    this.myControl = c;

- Joe Shapiro

---

这只对一半正确。OP要求在FromGroup传播错误的同时尽快捕获FormControl错误。如果您使用FormGroup的.sertErrors();，它将不会触发validate()函数。 - José Pulido