将 FormControl 传递给子组件 - 未指定名称的表单控件没有值访问器

Question

我有一个输入组件customInput，它创建了一个经典的输入字段并为其添加了一些布局香料，没有额外的逻辑。

我想传递一个 formControl 给它，将它绑定到它包含的输入。

应该这样使用：

<form [formGroup]="form">
  <custom-input [formControl]="form.controls['control']"></custom-input>
</form>

内部自定义输入：

export class HidInputFieldComponent  {
   @Input() formControl: AbstractControl

   ...
}

<div class="container">
  <input [formControl]="formControl"/>
    <label>label</label>
</div>

现在当我初始化组件时，我得到了

未指定名称的表单控件没有值访问器

在我的组件构造函数中记录控件，它是未定义的。

是我做错了还是没有办法绕过ControlValueAccessor？由于我实际上并没有构建自定义控件（我仍然使用经典输入），因此看起来很极端

Answer 1

您不需要导入 ControlValueAccessor 或任何类似的东西来完成此操作。

您需要做的就是将 FormControl 对象传递给您的子组件，如下所示：

<form [formGroup]="form">
  <custom-input [control]="form.controls['theControlName']">
  </custom-input>
</form>

这意味着您的自定义输入组件应如下所示：

import {Component, Input} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'custom-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent {
  @Input() control: FormControl;
}

还有模板：

<input [formControl]="control">

就是这样。

如果你像这样实现自定义输入，则不必将父 formGroup 带入子组件逻辑中，那是完全没有必要的（除非你需要对它或表单的其余部分进行一些操作控制）。

此外，将 FormControl 对象传递给自定义输入将使您能够访问它的属性，而无需引用 FormGroup 然后获取特定控件，因为这是在父组件上完成的工作。

我希望这个解决方案有助于简化许多人的工作，因为制作这种自定义控件很常见。

Answer 2

来自 Johann Garrido 的this answer 很好，但是它引入了额外的输入 [control]，您在使用自定义组件时需要始终牢记这一点。

另外，它直接绑定到ReactiveFormsModule，因为它只接受FormControl 实例。

在我看来，更好的方法是实现ControlValueAccessor 接口，但利用一些变通方法来避免重复控制处理：

export const NOOP_VALUE_ACCESSOR: ControlValueAccessor = {
  writeValue(): void {},
  registerOnChange(): void {},
  registerOnTouched(): void {}
};

并在包装表单控件的组件中使用NOOP_VALUE_ACCESSOR：

@Component({
  selector: "wrapped-input",
  template: `
    <mat-form-field class="example-full-width">
      <mat-label>Wrapped input</mat-label>

      <!--We pass NgControl to regular MatInput -->
      <input matInput [formControl]="ngControl.control" />
    </mat-form-field>
  `
})
export class WrappedInput {
  constructor(@Self() @Optional() public ngControl: NgControl) {
    if (this.ngControl) {
      // Note: we provide the value accessor through here, instead of
      // the `providers` to avoid running into a circular import.
      // And we use NOOP_VALUE_ACCESSOR so WrappedInput don't do anything with NgControl
      this.ngControl.valueAccessor = NOOP_VALUE_ACCESSOR;
    }
  }
}

这样 Angular 会认为WrappedInput 的工作方式与任何其他实现ControlValueAccessor 接口的组件（例如MatInput）一样。

另外，它适用于ReactiveFormsModule 和普通FormsModule。

WrappedInput 可以这样使用：

<wrapped-input [formControl]="sourceControl"></wrapped-input>

这是您可以玩的完整的 stackblitz： https://stackblitz.com/edit/angular-wrapped-form-control-example?file=src/app/app.ts

Answer 3

使用FormGroupDirective

该指令接受现有的 FormGroup 实例。届时将 使用此 FormGroup 实例来匹配任何子 FormControl、FormGroup、 和 FormArray 实例到子 FormControlName、FormGroupName 和 FormArrayName 指令。

这样做您可以从父级访问子 formControl

  @Component({
    selector: 'app-custom-input',
    templateUrl: './custom-input.html',
    viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective}]
  })    
    export class HidInputFieldComponent  {
     constructor(private fcd:FormGroupDirective) {       
    }
    ngOnInit() {
        this.fcd.form.addControl('formControl',new FormControl(''));
    }
    }

    <div class="container">
      <input [formControl]="formControl"/>
        <label>label</label>
    </div>

Answer 4

您也可以尝试实现 ControlValueAccessor 接口类。

@Component({
  selector: 'app-custom-input',
  templateUrl: './app-custom-input.component.html'
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => HidInputFieldComponent)
    }
  ]
})
export class HidInputFieldComponent implements OnInit, ControlValueAccessor {
  @Output() setDropdownEvent: EventEmitter<any> = new EventEmitter();

  ngOnInit() {}

  writeValue(value: any) {}

  propagateChange(time: any) {
    console.log(time);
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}
}