如何从 Angular 中的另一个组件访问控制权？

Question

我在组件 A 中有带有表单控件的表单。我决定将一些表单控件移动到单独的组件 B，以防止其他组件中的代码重复。

A.html:

<form [formGroup]="editForm">
  <B [formControllerName]="'name'" ></B>
  <!-- Other form controls -->
</form>

B.html:

<select class="form-select" formControlName="{{formControllerName}}">
  <!-- Options -->
</select>

我收到此错误： 错误：NG01050：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并向其传递一个现有的 FormGroup 实例（您可以在类中创建一个实例）。

如何从组件 A 访问表单控制器？

Answer 1

可以使用 viewProviders，参见，例如关于 FormArray 的 SO

一个更简单的

@Component({
  selector: 'hello',
  template: `<h1>Hello </h1>
      <input [formControlName]="name"/>
  `,
  viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class HelloComponent  {
  @Input() name: string;
  
  constructor(){}
}

您可以使用

<form [formGroup]="form">
  <hello [name]="name" > </hello>
</form>

在 .ts 中

  name = 'name';
  form=new FormGroup({
    name:new FormControl()
  })

参见堆栈闪电战

另一种方法是传递自己的 FormControl 并使用

   control:FormControl
   @Input('control') set _control(value){
       this.control=value as FormControl
   }

   <input [formControl]="control">

你使用作为

   <hello [control]="form.get('name')" > </hello>