Question

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。有人可以帮忙吗？

Answer 1

为了访问自己的自定义组件中的“反应式表单” 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() {}
}

ReferenceLink：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

在自定义组件中访问formControlName

1 个答案: