访问自定义组件内的 formControlName答案

【问题标题】：Access formControlName inside custom component访问自定义组件内的 formControlName
【发布时间】：2019-02-06 09:23:24
【问题描述】：

Inputtypeformtext 是我们的自定义组件。该组件的目的是显示文本字段。

当我在组件中拥有模板时，我能够看到值与字段相关联。

    <input-type-form-text id="{{ question.value.questionId }}" [question]="question.value" 
    [form]="section">
<input type="text" class="form-control" formControlName="isSelected"/>
     <input-form-error></input-form-error>
    </input-type-form-text>

如果我移动内联模板并保留在自定义组件模板中，我无法将字段值添加到表单中

 <input-type-form-text id="{{ question.value.questionId }}" [question]="question.value" 
    [form]="section">
    </input-type-form-text>

自定义组件模板内部

<div class="screen-input-text-field dynamic-field form-group" [formGroup]="form">

      <input type="text" class="form-control" formControlName="isSelected"/>
             <input-form-error></input-form-error>
</div>

如何在自定义组件中访问或传递 formControlName。有人可以帮忙吗？

【问题讨论】：

由于您将formGroup向下传递给子组件，您只需将formControl附加到formGroup，然后您的父组件应该能够通过formGroup获取表单控件跨度>

标签： angular

【解决方案1】：

为了在你自己的自定义组件中访问 Reactive Form formcontrolname，你的自定义组件需要实现 ControlValueAccessor 接口。

@Component({
  selector: 'input-selectcontrol-form',
  templateUrl: '',
  styleUrls: [''],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => SelectFormControlComponent)
    }
  ]
})
export class SelectFormControlComponent implements OnInit, ControlValueAccessor {

  @Input() dropDownList;
  constructor() {}

  ngOnInit() {}

  writeValue(value: any) {
    if (value) {}

  }

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

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

  registerOnTouched() {}
}

参考链接：https://www.linkedin.com/pulse/angular-custom-form-control-controlvalueaccessor-ankit-rana

https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83

【讨论】：