时间戳

首页 > 解决方案 > 如何将 AbstractControl 转换为模板中的 FormControl？

angular - 如何将 AbstractControl 转换为模板中的 FormControl？

问题描述

我有一个从父组件传递给子组件的 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>

标签： angular

解决方案

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

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

然后在模板中使用它：

  [formControl]="fc('subsectionFormControl')

推荐阅读