Angular 访问自定义组件中的formControlName

Angular 访问自定义组件中的formControlName,angular,Angular,Inputtypeformtext是我们的自定义组件。此组件的用途是显示文本字段 当我在组件中拥有模板时,我能够看到值与字段绑定在一起 <input-type-form-text id="{{ question.value.questionId }}" [question]="question.value" [form]="section"> <input type="text" class="form-control" formControlName="is

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。
有人能帮上忙吗。

为了在您自己的自定义组件中访问被动表单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() {}
}
参考链接:


因为您要将formGroup向下传递给子组件,所以只需将formControl附加到formGroup,那么父组件应该能够通过formGroup获取form控件