我如何将另一个组件的输出值绑定到组件中的表单控件 [英] how do i bind output values of another component to a form-control in my component

问题描述

这是我的html代码，基本上是一种表单.

This is my html code which is basically a form.

<form [formGroup]="calculatedForm" fxLayout="column" fxLayoutGap="15px" fxLayoutAlign="start space-betwen">
    <label for="category">CATEGORY</label>
      <app-toggle-button-group
        [items]="categories"
        [selectedItem]="getselectedCategory()"
        (valueChange)="updateCategory($event)"
        [disableButtons]="calculatedForm.value.system">
      </app-toggle-button-group>

      <label for="input_interval">INTERVAL</label>
      <app-toggle-button-group
        [items]="inputIntervals"
        [selectedItem]="getselectedInterval()"
        (valueChange)="updateInterval($event)"
        [disableButtons]="calculatedForm.value.system">
      </app-toggle-button-group>

      <label for="aggregation">AGGREGATION</label>
      <app-toggle-button-group
        [items]="aggregations"
        [selectedItem]="getselectedAggregation()"
        (valueChange)="updateAggregation($event)"
        [disableButtons]="calculatedForm.value.system">
      </app-toggle-button-group>

      <app-kpi-unit 
        [selectedUnitID]="selectedUnitId()" 
        (changedUnitID)= "selectUnit($event)"
        [disableSelect]="calculatedForm.value.system">
      </app-kpi-unit>

    </form>

这是我在控制器中的表单属性

this is my form property in controller

  calculatedForm = this.formBuilder.group({
    id: new FormControl(''),
    identifier: new FormControl(''),
    category: new FormControl('', [Validators.required]),
    aggregation: new FormControl(null, [Validators.required]),
    input_interval: new FormControl('', [Validators.required]),
    operator: new FormControl('', [Validators.required]),
    unit_id: new FormControl(null),
    org_unit: new FormControl('', [Validators.required]),
    system: new FormControl(false),
    deleted: new FormControl(false),
    assignedKpiId: new FormControl(null)
  });

您可以在html代码中看到，我正在使用组件发出的事件中的方法来更新表单控件

As you can see in html code I am using a method from event emitted by components to update my form controls

updateCategory(category: buttonGroupType) {
    this.calculatedForm.controls['category'].patchValue(category.name);
  }

但是我的要求是使用formcontrolName而不是使用方法进行绑定.是否可以避免使用更新方法

but my requirement is to bind using formcontrolName instead of using the methods. is it possible to avoid the update methods

推荐答案

为什么不使用formControl?

这可以将您的HTML绑定到表单控件 <input [formControl]="category"></input>

this can bind your Html to form controls <input [formControl]="category"></input>

这篇关于我如何将另一个组件的输出值绑定到组件中的表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！