如何在模板中将 AbstractControl 转换为 FormControl？

Question

我有一个从父组件传递到子组件的 FormGroup，然后在该 FormGroup 中，有一个从第一个子组件传递到第二个子组件的控件。不过，我随后想在按钮中使用该控件，以便我可以使用它来更改表单组的状态。

但是，当我执行 form.get('controlName') 时，它返回一个 AbstractControl，当我尝试将 AbstractControl 传递给[formControl]按钮的指令时，我收到一条错误消息，指出Type AbstractControl is not assignable to abstract control.

通常我只是将控件转换为组件中的 FormControl，但这不起作用，因为我直接在模板中使用控件。

表格

this.form = this._formBuilder.group({
      cost: this._formBuilder.control(''),
      width: this._formBuilder.control('')
    })

第一个子模板

<app-form-subsection-cost [subsectionFormControl]="form.get('cost')"></app-form-subsection-cost>

第二个孩子

export class FormSubsectionCostComponent implements OnInit {

  @Input() subsectionFormControl: AbstractControl;

  constructor() { }

  ngOnInit(): void {
  }

}

第二个孩子模板

<button [formControl]="subsectionFormControl as FormControl" value="Yes">Yes</button> //Error on formControl directive

我不能这样做：

<app-form-subsection-cost [subsectionFormControl]="form.get('cost')"
[subsectionFormControl]="form.get('cost') as FormControl"></app-form-subsection-cost>

Answer 1

我所做的就是在组件中定义一个方法来返回具有给定名称的 FormControl。

  fc(name) { return this.form.get(name) as FormControl; }

然后在模板中使用它：

  [formControl]="fc('subsectionFormControl')