Angular：帮助使用就地可编辑的表单

Question

我正在尝试创建一个就地可编辑的表单，其中的控件一次应该在单击外部按钮时在可编辑和仅查看模式之间切换（我不希望单击单个控件以切换编辑模式）。

我已创建此StackBlitz，我收到错误消息No provider for NgControl。我不想将表单元素包装在我想要创建的每个可编辑控件组件上。请帮帮我。

我想要的控制是这样的， <editable-control [mode]="formMode" type="text"></editable-control>

Answer 1

您的自定义表单组件实现了ControlValueAccessor接口，因此它需要NgControl提供程序。您必须使用ReactiveFormsModule代替FormsModule。

所以你必须从@angular/forms导入它并将它添加到相应NgModule的imports数组中：

// ...
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
     // ...
     ReactiveFormsModule
  ]
})
// ...

要使用自定义组件，您可以将其与formGroup指令一起使用。例如：

<form [formGroup]="myForm">
  <editable-control [mode]="formMode" type="text" formControlName="myText">
  </editable-control>
</form>